父div擴展頁面結尾 - 需要適合內容

由於某種原因，父div擴展到頁面的底部。我試圖讓它有一個高度的內容。父div擴展頁面結尾 - 需要適合內容

HTML：

<div id="sideMenu" > 
    <ul class="bmenu"> 
     <li onclick="wideScreen()">Wide Screen</li> <!--turn sidebar on/off--> 
     <li onclick="randFrame()">Random Border</li> <!--randomize vidcontain border--> 
     <li onclick="randBG()">Control Bar</li> 
    </ul> 
    <div style="clear:both;"></div> 
</div>

CSS：

#sideMenu{ 
    position: fixed; 
    left: -90px; 
    top: 250px; 
    height:100%; 
    width:100px; 
    background-color: black; 
    border: 3px solid #999400; 
    z-index:1000000; 
    float:left; 
    display:table; 
    -webkit-transition-duration: 0.3s; 
    -moz-transition-duration: 0.3s; 
    -o-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-border-radius: 0 5px 5px 0; 
    -moz-border-radius: 0 5px 5px 0; 
    border-radius: 0 5px 5px 0; 
}

來源

2013-02-16 Batman

這裏的問題是什麼？ ofcourse的父div將擴展如果子元素的內容增加.. – 2013-02-16 19:49:49

它擴展的方式通過3個列表項目，並達到包裝的底部 – Batman 2013-02-16 19:51:09

#sideMenu被延伸到頁面的底部，因爲它有height:100%。這意味着div的高度將根據包含塊的高度進行計算（在這種情況下，可能爲body）。如果未明確指定包含塊的高度，則該值將計算爲auto。 More info on the height property can be found here。

要解決您的問題，只需從CSS中刪除height:100%即可。這樣，#sideMenu將只擴展到其內容的高度（在你的情況下，列表項）。

JS Fiddle Example

來源

2013-02-16 19:49:53 JSW189

這工作。謝謝。我不認爲我理解身高100％。 – Batman 2013-02-16 19:51:51

@Batman我添加了更多關於'height'屬性和百分比的信息。希望這有助於！如果您還有其他問題，請隨時提問。 – JSW189 2013-02-16 19:56:12

@Batman如果我解決了你的問題，請註冊並/或接受這個答案。這樣，未來遇到同樣問題的其他人會知道這個解決方案是有效的。 – JSW189 2013-02-17 00:41:40

父div擴展頁面結尾 - 需要適合內容

回答

相關問題