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

Question

나는 현재 트위터의 부트 스트랩 작업과 조금 특별한 뭔가를 얻으려고 노력하지만 작동되지 수있어 ...

나는 네비게이션 바있는 유체 레이아웃을 싶습니다 , 사이드 바, 내용 및 바닥 글. 또한 전체 높이의 콘텐츠 내부에있는 div를 원합니다.

HTML

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <a class="brand" href="#">Navbar</a> 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3"> 
      <div class="well sidebar-nav"> 
       <ul class="nav nav-list"> 
        <li class="nav-header">Sidebar</li> 
       </ul> 
      </div><!--/.well --> 
     </div><!--/span--> 

     <div class="span9"> 
      <div class="hero-unit"> 
       <h1>Hero Unit</h1> 
      </div> 

      <div class="row-fluid"> 
       <div class="span12"> 
        <div id="fullHeight" style="background-color: red"> 
         <p>Full height here</p> 
        </div> 
       </div><!--/span--> 
      </div><!--/row--> 
     </div><!--/span--> 
    </div><!--/row--> 

    <hr> 

    <footer> 
     <p>&copy; Company 2013</p> 
    </footer> 

</div><!--/.fluid-container--> 

CSS 여기

body { 
     padding-top: 60px; 
     padding-bottom: 40px; 
    } 
    .sidebar-nav { 
     padding: 9px 0; 
    } 

    @media (max-width: 980px) { 
     /* Enable use of floated navbar text */ 
     .navbar-text.pull-right { 
      float: none; 
      padding-left: 5px; 
      padding-right: 5px; 
     } 
    } 

내가 /이 무엇을 보여 jsfiddle 원하는됩니다 : http://jsfiddle.net/2nuvP/

누군가가 나에게이 작업을 진행하는 데 도움이 수 ?

팁 : 난 단지, 내가 JS/jQuery를 솔루션을 받아이 CSS 가능합니다 확실하지 않다가, ... 는 또한 솔루션이 아닌 일부 HTML 수정에게 필요한 큰 거래를 필요로하는 경우)

Answer 1

주로 jQuery를 사용하여 문제를 해결할 수 있습니다.

http://jsfiddle.net/uyEuN/4/

내가이 추가를 제외하고는 대부분 혼자 HTML을 떠난

function resolveFullHeight() { 
    $("#fullHeight").css("height", "auto"); 

    var h_window = $(window).height(), 
     h_document = $(document).height(), 
     fullHeight_top = $("#fullHeight").position().top, 
     est_footerHeight = 112; 

    var h_fullHeight = (-1 * (est_footerHeight + (fullHeight_top - h_document))); 

    $("#fullHeight").height(h_fullHeight); 
} 

resolveFullHeight(); 

$(window).resize(function() { 
    resolveFullHeight(); 
}); 

자바 스크립트는 네비게이션 바 아래에 div에.

<div class="spacer-fluid-60"></div> 

CSS는 .spacer-fluid-60 DIV, 의 높이를 설정하기위한 새로운 규칙을 포함하고 나는 또한 body 요소에 대한 padding-top 규칙을 제거했습니다. 완전한 세부 사항을 보려면 jsfiddle을 조사하십시오.

HTML에서는 여러 필러 단락을 추가했으며 대다수는 주석으로 처리했습니다. 필요에 따라 문자를 해제하여 #fullHeight 요소의 다양한 콘텐츠 높이로 놀고 의도대로 동작하는지 확인하십시오. 지금까지 해본 최소한의 테스트는 이것이 효과가있을 것이라고 제안합니다.

참고 : 스크롤하는 동안 함수가 호출되는 횟수를 줄이려면 일부 throttling을 추가하십시오.