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 的高度将根据包含 block (在本例中，可能是 body)的高度来计算。如果未明确指定包含 block 的高度，则该值将计算为 auto。 More info on the height property can be found here .

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

JS Fiddle Example