我已经查看了其他解决方案，但它们对我没有用。我已经在侧边栏上尝试了“height：100％”，但仍然没有效果。请问有人能指点我正确的方向吗？我希望侧边栏的颜色能够延伸到整个页面的长度。
3个回答
24
好的，我会在此稍作说明:
当你在 CSS 中设置 height:100%; 时，你需要问自己一个问题：-“100% of what?”- 这取决于元素的位置是如何设置的。如果你设置了 position:absolute; ，那么它就是 用户浏览器视图的100%；否则，它就是元素父级高度的100％。 因此，如果你没有在某个地方设置适当的高度或绝对位置，你将得到一个什么都没有的100%，这是什么都没有（回到默认内容调整后的高度）。
因此，让我们暂时考虑将父 div 的位置设置为 absolute 并将其设置为100％高度（以便相对定位的子侧边栏将获得与其相同的高度，如果其高度设置为100％）。点此查看演示 - 现在让我们来看一下我们有什么：我们有一个父 div（黄色）高达用户的浏览器视图，但它的高度固定，不会改变以适应内容，然后我们有一个匹配其父级高度的侧边栏（因此其高度也不适合内容），最后，我们有一个长的内容文本（透明背景），它显然超出了父 div 的高度，并位于无人区。不好...
我们能做什么？(似乎将父级溢出设置为滚动 不是一个好主意) ... 我们需要以正确的方式关注问题：你基本上有两个兄弟 div，你希望它们的内容高度很好地适应，但同时你希望其中一个保持与兄弟的相同高度 -> 对于这个问题没有易如反掌的 CSS 解决方案（据我所知）。
var height = $('.content').height()
$('.sidebar').height(height)
并且它将正常工作。请注意，我保留了父级的绝对位置，并将其设置为100％高度，但未设置侧边栏的任何高度，现在它相当匹配内容面板的实际大小。
希望这可以帮到你
- Carlo Moretti
1
1非常有帮助，我已经寻找了一段时间，你救了我的一天！ - Mr. Pyramid
2
@Onheiron，你的帖子非常有帮助。谢谢！
我添加了一行代码，因为我注意到短内容页面没有完全延伸到页面底部，导致侧边栏也很短。现在脚本检查哪个元素（.content或body）具有更大的高度，然后将相同的高度应用于.sidebar。
HTML：
<body>
<div class="sidebar"></div>
<div class="content"></div>
</body>
JavaScript:
$(document).ready(function () {
var height1 = $('.content').height()
var height2 = $('body').height()
if (height1 > height2) {
$('.sidebar').height(height1)
} else {
$('.sidebar').height(height2)
}
});
CSS:
body, .sidebar {
height:100%
}
如果
.content 区域高度小于页面主体，则可以将if语句的else部分删除，因为它会默认使用CSS。不需要脚本。- Ryan Labelle
-1
height:100%应该可以正常工作，但是你必须确保包含它的 div 也是 100%。
#main-content {
background: url("../images/diagonal-noise.png");
}
#content {
background-color: #FEFEFE;
width: 920px;
margin-left: auto;
margin-right: auto;
border-left: 25px solid #79879E;
border-right: 25px solid #79879E;
padding: 20px;
height:100%;
}
#secondary-content {
background-color: #CED6E2;
width: 200px;
float: left;
border-right: 1px dotted #79879E;
padding: 10px;
margin: 10px 20px 10px -20px;
height:100%;
}
- Jason
5
不行啊，或者说效果不太好…在这个 jsfiddle 里你可以看到需要将父 div 的 position 设置为 absolute，同时这会使得父元素的高度固定，无法适应内容的高度…如果你想尝试一下 JavaScript 的话我可以给你发一个相关的 fiddle。问题是你要让侧边栏的高度与同级元素相等而不是与父元素相等。 - Carlo Moretti
我通过给它一个底部填充为30000像素和一个底部边距为-30000像素来修复了它。没有 JavaScript，没有伪列。只是 CSS 8D。 - Lindsay
还在父容器上使用了 overflow: hidden;。 - Lindsay
不要这样做，你需要高度自由并适应内容，你不想让你的内容消失在盒子外面！ - Carlo Moretti
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接