扩展浮动菜单,因此高度匹配内容div [英] extend floated menu, so height is matching the content div
问题描述
我有一个内容div和侧边栏,内容div的高度将根据加载的内容进行调整,但我想要侧边栏div一直延伸,取决于内容的最大尺寸,侧边栏应该是相同的大小。
查看上面的小提琴,我想要边栏向下延伸,取决于内容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 =containerstyle =background-color:#f2f2f2>
< div id =content>这里是内容,此div的高度将根据内容而有所不同。
< br />< br />< br />< br />< br />< br />< br / >< br />< br />< br />< br />
< p>我不想要这个大空盒子。 - > < br />我想要侧边栏向下延伸 - >< / p>
< / div>
< div id =sidebar>我想让这个边栏一直向下延伸,以匹配#content divs height(无论是什么,动态)< / div>
< div style =clear:both>< / div>
你必须使用javascript。使用Jquery它将像下面这样。
$('#sidebar')。height($('#content') 。高度());
fiddle http://jsfiddle.net/YMFGU/9/
I have a content div and a sidebar, the content div's height will adjust depending on the content being loaded, but I want the sidebar div to be extended all the way down, depending on the max size of the content, the sidebar should be the same size.
Fiddle, Fiddle, Fiddle! - JS Fiddle
View the above fiddle, I want the sidebar extended all the way down, depending on the height of the content div.
For non fiddlers:
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>
You will have to use javascript for that. with Jquery it will be somehing like following.
$('#sidebar').height($('#content').height());
fiddle http://jsfiddle.net/YMFGU/9/
这篇关于扩展浮动菜单,因此高度匹配内容div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!