提问人：Nick 提问时间：9/19/2012 最后编辑：Nick 更新时间：9/19/2012 访问量：8315
强制元素的高度与同级元素相同？
Forcing element be the same height as sibling element?
问：
我有以下标记：
[HTML全
<div class="container">
<div class="sidebar">
info <br/>
info <br/>
</div>
<div class="post">
post <br/>
post <br/>
post <br/>
post <br/>
</div>
</div>
CSS的
container {
float:left;
width:100%;
}
.sidebar {
float:left;
clear:both;
background-color: #eee;
width:150px;
}
.post {
background-color: #ccc;
margin-left:150px;
}
如何使用 HTML/CSS 强制侧边栏采用帖子的高度？ 侧边栏和帖子的高度都可以更改大小，但帖子的高度总是大于侧边栏的高度。
JSFiddle：http://jsfiddle.net/KK4Yc/
答：
0赞
Diodeus - James MacFarlane
9/19/2012
#1
如果容器的高度是固定的，那么是的，否则你需要使用 JavaScript。
body, html { height:100% }
.container {
width:100%;
height:500px;
border:1px solid #ff0000
}
#bg {
background-color: #eee;
width:150px;
height: 100%;
position: absolute;
}
.sidebar {
float:left;
clear:both;
background-color: #eee;
width:150px;
height: 100%;
position:relative;
}
评论
0赞
Pebbl
9/19/2012
您的意思是将 body 和 html 设置为？我知道当您将元素捕捉到页面的整个高度时，这是必需的 - 但是对于将兄弟元素捕捉到容器的高度，您可能没有的意思？height:100%;.sidebar, .post { height: 100%; }
0赞
Diodeus - James MacFarlane
9/19/2012
不，你真的需要正文，html在那里，否则这将不起作用。
0赞
Pebbl
9/19/2012
好吧，我想我们会同意不同意这一点，但您仍然缺少将 .sidebar 和 .post 的高度设置为 100%。否则，这些元素将保持其默认高度，而不会按照 Nick 的要求执行。
2赞
j08691
9/19/2012
#2
没有 JavaScript 就无法做到这一点，除非你用假列来伪造它。如果你想使用jQuery，它是一行的：
$('.sidebar').height($('.post').height());
评论
0赞
nclsvh
5/4/2022
如果能包含一个JS版本:)那就太好了
0赞
d.k
9/19/2012
#3
正如 j08691 所说，可以通过 JS 来完成。
但是你可以尝试不同的方法，例如使用纯 css 在 中添加一个灰色的 bg-image，这样它看起来就像侧边栏延伸到底部，或者添加具有相同目的的附加元素 （FIDDLE）：.container
.container {
float:left;
width:100%;
overflow:hidden;
position: relative;
}
#bg {
background-color: #eee;
width:150px;
height: 100%;
position: absolute;
}
.sidebar {
float:left;
clear:both;
background-color: #eee;
width:150px;
height: 100%;
position:relative;
}
<div class="container">
<div id="bg"></div>
-1赞
Pebbl
9/19/2012
#4
好吧，我不太确定为什么其他海报会如此长，您只需要利用 dom 元素自动具有的关系的好处：parent->child
.container {
overflow: hidden;
border: 1px solid #ff0000;
}
.sidebar {
background-color: #eee;
float: left;
clear: both;
width: 150px;
}
.sidebar-wrapper {
background: #eee;
overflow: hidden;
}
.post {
margin-left: 150px;
background-color: #ccc;
}
以上是您应该需要的所有 css（只要您有“固定颜色”或“重复背景图像”侧边栏），以下是标记：
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
info <br/>
info <br/>
</div>
<div class="post" style="background: green;">
post <br/>
post <br/>
post <br/>
post <br/>
</div>
</div>
</div>
显然（从 HTML/CSS 的角度来看相当烦人），如果你没有“纯色”或“重复背景”区域，那么你将不得不使用 j08691 的 javascript 方法或 Diodeus 的固定高度容器方法（尽管 Diodeus 现在似乎已经更改了代码并包含了 caligula 的部分答案——我猜是偶然的？
评论