扩展浮动菜单,因此高度与内容div匹配

时间:2011-09-15 16:58:03

标签: html css-float sidebar css

我有一个内容div和侧边栏,内容div的高度将根据加载的内容进行调整,但我希望侧边栏div一直向下扩展,具体取决于内容的最大尺寸,侧边栏应该是相同的大小。

Fiddle, Fiddle, Fiddle! - JS Fiddle

查看上面的小提琴,我希望侧边栏一直向下延伸,具体取决于内容div的高度。

非小提琴手:
CSS

#content
{
border:1px solid black;
float: left;
width: 80%;
}

#sidebar
{
width: 19%;
border:1px solid red;
float: left; 
background-color: #ddd;
}

p{text-align: right}

HTML

<div id="container" style="background-color: #f2f2f2">
<div id="content">Here is the content, the height of this div will vary depending on the content.
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <p>I dont want this big empty box. --> <br/>I want the sidebar extended down here--></p>
</div>
<div id="sidebar">I want this sidebar to extend ALL the way down, to match the #content divs height (whatever it is, dynamic)</div>
<div style="clear:both"></div>

1 个答案:

答案 0 :(得分:3)

你必须使用javascript。与Jquery一样,它会像以下一样。

    $('#sidebar').height($('#content').height());

小提琴http://jsfiddle.net/YMFGU/9/