Question

由于某种原因，父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;
}

Answer 1

#sideMenu扩展到页面底部，因为它有height:100%。这意味着div的高度将根据包含块的高度计算（在这种情况下，可能是body）。如果未明确指定包含块的高度，则该值将计算为auto。 More info on the height property can be found here

要解决您的问题，只需从CSS中删除height:100%即可。这样，#sideMenu只会扩展到其内容的高度（在您的情况下，列表项）。

JS Fiddle Example

父div扩展页面结尾 - 需要适合内容

1 个答案: