유체 전체 높이 부트 스트랩 레이아웃

Question

전체 브라우저 창을 채우지 만 스크롤하지 않는 게임 레이아웃을 만들려고합니다. 레이아웃은 다음과 같습니다.

+----------------------+ 
+  Header   + 
+------+---------------+ 
+  +    + 
+  +    + 
+ Side + Main  + 
+  + Fill Height + 
+  +    + 
+  +    + 
+----------------------+ 
+  Footer   + 
+------+---------------+ 

사이드 바는 필요한 경우 스크롤해야하지만 기본 콘텐츠는 스크롤해야합니다. 레이아웃은 반응 적이어야합니다. 브라우저가 너무 좁 으면 측면이 "머리글"아래로 이동하고 슬라이드가 표시되는 방식이 바뀝니다 (바닥 글이 사라질 가능성이 있음).

부트 스트랩을 사용하고 싶지만 그러한 레이아웃이 가능할 수있는 방법에 대한 세부 정보를 찾을 수 없습니다. 이 디스플레이에서 부트 스트랩 레이아웃을 사용하는 것이 맞습니까? 아니면 절대 위치 (% 기반)로 CSS를 코딩하고 섹션 내에서 부트 스트랩 위젯을 사용해야합니까?

Answer 1

사이드 바 및 주요 콘텐츠를 100 % 높이/너비 래퍼에 넣어이 유형의 레이아웃을 만들 수 있다고 생각합니다. 머리글과 바닥 글의 높이에 따라 패드 sidebar_wrapper : http://bootply.com/102032

편집 :

는 Bootply에서이 예제 템플릿을 참조

#sidebar-wrapper { 
     height: 100%; 
     padding: 50px 0 50px 0; /* pad top and bottom by height of header and footer */ 
     position: fixed; 
     border-right: 1px solid gray; 
    }