css - 扩展页面末尾的父 div - 需要适合内容

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。可在此处找到有关该物业的更多信息height。

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

JS 小提琴示例