內容div的拉伸高度如此vertical-navi得到延伸

我有這個小提琴：http://jsfiddle.net/z715whdj/1/不知道你需要從CSS所以請看看小提琴。內容div的拉伸高度如此vertical-navi得到延伸

<div class="container"> 
<div class="head"> 
    <!-- Slogen and meta-links --> 
</div> 
<div class="carousel"> 
    <!-- Maybe some headpics or a slider --> 
</div> 
<div class="logo"> 
    <!-- Main Logo --> 
</div> 
<div class="navi"> 
    <div class="logos"> 
     <ul> 
      <li></li> 
      <li></li> 
      <!-- Placeholder for some logos --> 
     </ul> 
     <div class="clr"></div> 
    </div> 
    <div class="nav"> 
     <!-- Navi UL --> 
    </div> 
</div> 
<div class="content"> 
    <!-- Content comes here --> 
</div> 
<div class="footer"> 
    <!-- Footer --> 
</div> 
</div>

左側的藍色欄應該是導航欄，它應該與內容+頁腳一樣高（頁腳重疊）。我怎麼能得到這個？

我得到最小高度方面，但它似乎掙扎，因爲我得到一個滾動條。我在這裏通讀了一些問題，但我無法得到它們的某些方面。

是否有可能在內容+頁腳函數中擴展navi的高度，還是必須編寫解決方法，如果必須，如何編寫此解決方法？

來源

2014-09-03 Dustin

什麼瀏覽器你需要支持？ IE 6/7/8/9？ – 2014-09-03 08:18:54

IE8-11應該可以工作。 IE7會很棒。 – Dustin 2014-09-03 08:22:53

使用適當的「float」屬性和「clearfix」類。 – wikijames 2014-09-03 08:24:19

嘗試將position:relative設置爲容器，將position:absolute設置爲navi。設置top屬性以補償標題高度，並且bottom設爲0以使navi滿填container高度。

CSS：

.container { 
    width: 970px; 
    padding-right: 3px; 
    padding-left: 3px; 
    background-color: #fff; 
    margin: auto; 
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.65); 
    z-index: 1; 
    font-family: Verdana, sans-serif; 
    font-size: 14px; 
    color: #575756; 
    min-height: 100%; 
    height: 100%; 
    position:relative; 
} 

.container .navi { 
    float: left; 
    margin-left: 30px; 
    z-index: 3; 
    background-color: #233872; 
    padding: 20px 10px 20px 10px; 
    border: 3px solid #fff; 
    border-bottom: 0; 
    position: relative; 
    width: 220px; 
    position:absolute; 
    top:50px; 
    bottom:0px; 
}

jsFiddle

編輯：

按照要求，我創建了一個新的（簡單）的佈局，讓容器fullfill 100％的高度沒有垂直滾動條：jsFiddle

來源

2014-09-03 08:50:37 Giorgio

非常感謝。我如何擺脫滾動條？高度似乎超過100％ – Dustin 2014-09-03 09:08:48

滾動條出現是因爲您已設置html，body和容器的高度爲100％。如果你想擺脫它，只需刪除這些屬性：http://jsfiddle.net/z715whdj/3/ – Giorgio 2014-09-03 09:20:43

我知道。但是如果我刪除.container-height屬性，那麼navi即使在內容中也不會擴展。我希望它擴展，但只限於瀏覽器的限制，而不是上面的（所以沒有滾動條 - 如果內容長度超過監視器高度，只能添加滾動條）。 – Dustin 2014-09-03 09:34:16

內容div的拉伸高度如此vertical-navi得到延伸

回答

相關問題