扩展浮动菜单,因此高度与内容 div 匹配
我有一个内容 div 和一个侧边栏,内容 div 的高度将根据正在加载的内容进行调整,但我希望侧边栏 div 一直向下延伸,具体取决于内容的最大大小,侧边栏应该是大小相同。
查看上面的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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
为此,您必须使用 javascript。使用 Jquery 会像下面这样。
小提琴 http://jsfiddle.net/YMFGU/9/
You will have to use javascript for that. with Jquery it will be somehing like following.
fiddle http://jsfiddle.net/YMFGU/9/