父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扩展页面结尾 - 需要适合内容

回答

相关问题