引導流體佈局和全高度的div

我目前正在與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的修改，這是沒有必要的一個大問題......

來源

2013-02-27 Julien

如果沒有絕對定位頁眉和頁腳，就無法完成。 http://stackoverflow.com/questions/14986873/attaining-the-maximum-possible-height-for-a-fixed-element-between-two-other-fixe/14987834 – isherwood 2013-02-27 19:57:32

我剛剛嘗試了你的文章中描述的解決方案，但不能讓我的工作，因爲我想：英雄單位，或者其他什麼，這是我的「全高div」現在被掩蓋... 或者我失去了一些CSS？ – Julien 2013-02-28 14:01:11

主要是使用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，的高度，我也刪除了body元素padding-top規則。調查jsfiddle獲取完整的細節。

在HTML中，我添加了一些重複的填充段落，並且留下了大多數註釋。如有必要，請將它們取消註釋，以便與#fullHeight元素中的內容高度變化並查看它是否仍然按照您的意圖行事。迄今爲止我所做的最低限度的測試表明這將起作用。

注意：添加一些throttling以減少滾動時函數被調用的次數。

來源

2013-02-28 06:30:35 mg1075

這個解決方案實際上相當不錯，而且正是我想要的！剛剛在某些情況下添加了「關於DOM更改事件」來自動調整大小，這很好。非常感謝！ – Julien 2013-02-28 14:02:03

引導流體佈局和全高度的div

回答

相關問題