부트 스트랩 3.0 전신 바디 사이드 바

Question

전신 길이가되도록 부트 스트랩 div를 얻으려고합니다.

이것은 내가 지금까지 시도한 것입니다 : http://jsfiddle.net/bKsad/315/

html, body { 
    min-height: 100% 
} 
.wrap { 
    height: 100% 
} 
.sidebar { 
    background-color:#eee; 
    background-repeat: repeat; 
    padding:0; 
    min-height:100% !important; 
    position:relative; 
} 
.sidebar .sidebar-content { 
    height:100%; 
    width:100%; 
    padding: 5px; 
    margin:0; 
    position:relative; 
} 

오른쪽 열은 더 이상 성장함에 따라, 나는 사이드 바는 동일한 작업을 수행합니다.

Answer 1

접근 방식 1 : 랩 div의 끝에 스타일 = "clear : both"로 빈 div 추가. http://jsfiddle.net/34Fc5/1/

approch 2 : http://jsfiddle.net/34Fc5/ :

html, body { 
    height: 100%; 
} 
.wrap { 
    height: 100%; 
    overflow: hidden; 
} 
.sidebar { 
    background-color:#eee; 
    background-repeat: repeat; 
    padding:0; 
    height:100% !important; 
    position:relative; 

} 
.sidebar .sidebar-content { 
    height:100%; 
    width:100%; 
    padding: 5px; 
    margin:0; 
    position:relative; 
} 

추가 "오버 플로우 : 숨겨진;" .wrap 변경된 높이 : html, body 높이 변경 : 100 %. 사이드 바

CSS 방식을 사용하면 사이드 바의 높이가 브라우저의보기 포트와 일치합니다. 따라서 접근법 1을 보면 스크롤 할 때 뷰포트에 배경 정지가 있음을 알 수 있습니다. 그것을 고치기 위해서는 js가 필요합니다.

<div class="container-fluid"> 
<div class="row"> 
    <div class="col-md-3 sidebar"> 
    Sidebar Content 
    </div> 
    <div class="col-md-9 col-md-offset-3 content"> 
    Main Content 
    </div> 
</div> 
</div> 

그런 다음 반드시 중단 점 라인 -을 만들기 위해 CSS를 사용

:

Answer 2

의 핵심은 부트 스트랩 3가 제공하는 "COL-MD-X"와 "COL-MD는 오프셋-X"스타일을 이해하는 것입니다 쪽으로. 당신은 당신의 특정 요구에 패딩/여백 미세 조정해야하지만 오프셋 및 @media 중단 점은 꽤 잘 전체적인 레이아웃을 처리 :

html, body, .container-fluid, .row { 
    height: 100%; 
} 

.sidebar { 
    background-color: #CCCCCC; 
} 

@media (min-width: 992px) { 
    .sidebar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    z-index: 1000; 
    display: block; 
    background-color: #CCCCCC; 
    } 
} 

근무 솔루션 :

당신이 사용하는 경우 http://www.bootply.com/111837 "(COL)를 -sm-x "또는"col-lg-x "를 사용하면 @media CSS를 해당 최소 너비 (sm의 경우 768px 및 lg의 경우 1200px)로 바꿀 수 있습니다. 부트 스트랩이 나머지를 처리합니다.

Answer 3

(모든 노력의 몇 시간 후) 나를 위해 일을 가지고있는 유일한 방법은

HTML <nav class="col-sm-3 sidebar">

CSS padding-bottom: 100%;

%의 패딩 나를 위해 그것을했다이었다. 이제는 페이지의 맨 아래로 이동합니다.

Answer 4

나는 이것을 절대적으로 위치한 div와 약간의 jQuery를 사용하여 해결했다. 50px의 고정 높이를 가진 부트 스트랩 탐색 막대가 있으므로 코드에서 50을 보는 이유가 여기에 있습니다. 상단 네비게이션 바가없는 경우 제거 할 수 있습니다.

이 솔루션은 모든 높이에서 동적으로 작동합니다.

CSS의 :

.sidebar { 
    background-color: #333333; 
    position: absolute; 
    min-height: calc(100% - 50px); 
} 

JQuery와 :

var document_height = $(document).height(); 
var sidebar = $('.sidebar'); 
var sidebar_height = sidebar.height(); 

if (document_height > sidebar_height) { 
    sidebar.css('height', document_height - 50); 
} 

이것에 대해 깔끔한 것은 그래서, 그것의 최소 높이를 조정하기 위해 CSS를 사용하기 때문에 배경의 경경가 없을 것입니다 일반적으로 jQuery 크기를 조정하면 배경이 깜빡 거리며 페이지로드시 숨겨집니다.