2014-12-05 183 views
0

我該如何設置一個全高邊欄,使用響應式網格系統,與自舉類似?100%高度響應邊欄

我運行它的問題是.main包裝div摺疊到.primarycol div的高度。

我使用拉和推類來調整視覺佈局,因此.secondarycol div看起來像它的左邊,儘管它在代碼中的.primarycol div之後。

Adding the secondarycol class

<div id="main" class="main content"> 
<div class="row"> 
<div id="primarycolumn" class="primarycol col12 col9-768 col3-768-push" role="main"></div> 
<div id="secondary" class="secondarycol col12 col3-768 col9-768-pull col7-1024-pull" role="complementary"></div> 
</div> 
</div> 

通常情況下,沒有.secondarycol`類,股利會和這個樣子。

enter image description here

我曾嘗試加入min-height:100%.main股利和height:100%body標籤,但使main DIV高度永遠只能是瀏覽器窗口的高度,而不是內容。

任何有關如何補救此問題的建議都會非常受歡迎。

這是我的基礎結構的codepen。 http://codepen.io/onebitrocket/pen/ZYQLMm/

我已經在第三列中添加以及一些頁面需要一個。

該列系統基於bootstraps,但我認爲它是一個改進版本: 列類聲明從最小尺寸到最大尺寸。 我也改變了類名來指示斷點大小而不是XS,SM,MD,LR等。

感謝

+0

你可以請把代碼放在jsfiddle或codepin中。如果你這樣做,你很可能會很快得到答案。 – bryjohns 2014-12-05 23:49:47

+0

顯示.secondarycol的CSS代碼。 – xio4 2014-12-05 23:52:21

+0

如果我不得不猜測推拉正在用浮筒做什麼。您可能需要在.secondarycol – bryjohns 2014-12-05 23:53:16

回答