0

何らかの理由で、親 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;
}
4

1 に答える 1

0

#sideMenuがあるため、ページの下部まで拡張されていますheight:100%。これは、divの高さが、含まれているブロックの高さ（この場合はおそらくbody）を基準にして計算されることを意味します。含まれているブロックの高さが明示的に指定されていない場合、値はとして計算されautoます。プロパティの詳細については、heightこちらをご覧ください。

問題を解決するにheight:100%は、CSSから削除するだけです。そう#sideMenuすれば、そのコンテンツ（あなたの場合はリストアイテム）の高さまでしか拡張されません。

JSフィドルの例

于 2013-02-16T19:49:53.353 に答える