부트스트랩 3개의 전체 높이 열: 사용자 정의 CSS 솔루션

소개:

만들기 Twitter Bootstrap 3을 사용한 전체 높이 레이아웃은 어려울 수 있습니다. Bootstrap의 기본 클래스는 이 기능을 지원하지 않지만 사용자 정의 CSS를 사용하여 이 효과를 얻을 수 있습니다.

사용자 정의 CSS 접근 방식:

1. 설정 100% 높이:
   본문, 컨테이너 및 행 요소의 높이를 100%로 설정하여 해당 요소가 전체 높이에 걸쳐 있는지 확인합니다. viewport.
2. 테이블로 표시:
   display: 테이블을 사용하여 컨테이너 요소를 테이블로 변환합니다. 이를 통해 컨테이너의 콘텐츠를 표 형식 구조로 정렬할 수 있습니다.
3. 플로팅 셀:
   탐색 열에 no-float와 같은 사용자 정의 클래스를 추가합니다. 이 클래스가 디스플레이: 테이블 셀 및 부동: 없음을 갖도록 설정합니다. 이렇게 하면 탐색 열이 떠다니는 것을 방지하고 콘텐츠 열과 수직으로 정렬할 수 있습니다.

마크업:

Header

    

        
Navigation
        
Content
    

CSS:

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

장점 및 고려 사항:

• 이 사용자 정의 CSS 솔루션은 Bootstrap 3과 호환되는 전체 높이 레이아웃을 제공합니다.
• CSS에서 열 너비를 수정하여 탐색과 콘텐츠의 1:3 비율을 조정할 수 있습니다.
• 그러나 다음이 중요합니다. 충돌을 피하기 위해 Bootstrap의 기본 열 클래스를 수정하는 대신 사용자 정의 클래스(예: no-float)를 사용하십시오.