Bootstrap жидкости расположение и полная высота DIV

Question

Я сейчас работаю с Bootstrap в Twitter и пытаюсь получить что-то немного специфическое, но не может получить его работу ...

Я хотел бы макет жидкости с навигационной панелью , боковой панели, содержимого и нижнего колонтитула. Также я хотел бы, чтобы 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/

Может кто-то помочь мне получить эту работу?

Советы: есть я не уверен, что это возможно с помощью CSS только, я принимаю решение JS/JQuery;) Кроме того, если ваше решение нуждается в некотором HTML модификации этого не нужно большое деле ...

Answer 1

Вот вам вопрос, используя в основном jQuery.

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

JavaScript

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(); 
}); 

Я оставил HTML в одиночку, по большей части, для добавления этого, кроме Div под навигационной панели.

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

CSS включает в себя новые правила для установления высоты .spacer-fluid-60 DIV, и я также снял padding-top правило для body элемента. Изучите jsfiddle для получения полной информации.

В HTML, я добавил несколько дубликатов абзацев наполнителя и оставил большинство из них закомментированными. Не комментируйте их при необходимости, чтобы поиграть с изменениями высоты содержимого в элементе #fullHeight и посмотреть, все ли он ведет себя так, как вы его намереваетесь. Минимальное тестирование, которое я сделал до сих пор, предполагает, что это сработает.

Примечание: добавьте throttling, чтобы уменьшить количество вызовов функции во время прокрутки.