当前位置: 动力学知识库 > 问答 > 编程问答 >

css - Parent div extending the end of page - need to fit contents

问题描述:

The parent div is extending to the bottom of the page for some reason. I'm trying to get it to have a height of it's contents.

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;

}

网友答案:

#sideMenu is extending to the bottom of the page because it has height:100%. This means that the height of the div will be calculated with respect to the height of the containing block (in this case, probably body). If the height of the containing block is not specified explicitly, the value will be computed as auto. More info on the height property can be found here.

To solve your issue, simply remove height:100% from the CSS. That way, #sideMenu will only extend to the height of its contents (in your case, the list items).

JS Fiddle Example

分享给朋友:
您可能感兴趣的文章:
随机阅读: