CSS 如何在页面的整个长度上扩展侧边栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12696476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I extend my sidebar throughout the entire length of the page?
提问by Lindsay
I've looked at other solutions, however they're not working for me. I've tried height: 100% on my sidebar and that's still not doing the trick. Could someone please point me in the right direction? I'd like the color of the sidebar to extend the entire length of the page.
我看过其他解决方案，但它们对我不起作用。我已经在侧边栏上尝试了 height: 100% ，但仍然没有成功。有人可以指出我正确的方向吗？我希望侧边栏的颜色可以扩展页面的整个长度。
HTML: http://lrroberts0122.github.com/DWS/lab3/index.html
HTML：http: //lrroberts0122.github.com/DWS/lab3/index.html
回答by Onheiron
Ok I'll try to explain little more here:
好的，我会在这里尝试解释一下：
When you set height:100%;in css you have to ask yourself - "100% of what?" -... Well this depends on how you set the element's position. When you set position:absolute;then it'd be 100% of user's browser viewotherwise it'd be 100% of the element's parent height.Thus if you ain't setting a proper height or an absolute position somewhere you'll just get 100% of nothing which is nothing (which rolls back to default content-adjusted height).
So let's for a moment consider making parent div's position absoluteand setting it at 100% height(so that your relatively positioned children sidebar will get the same height if its height is set to 100%). HERE A FIDDLE- Now let's see what we have: we have a parent div(yellow) as high as the user's browser view, but its height is fixed and won't change to fit the content, then we have a sidebar(red) matching its parent's height (thus its height won't fit the content eather), finally we have a long content text(transparent bg) which clearly overlaps the parent div's height and lands in the middle of nowhere. Not good...
What can we do? (doesn't seem setting parent's overflow to scrollis a good idea) ... we need to watch the problem in the right way : you basically have two sibling divs and you want them to fit their content height well, but at the same time you want one of them to keep its sibling's same height -> no easy peasy css solutions for that (that I know of).
Finally my suggestion is to use a little jquery: here a fast setupand here the full site. Now just write:
var height = $('.content').height() $('.sidebar').height(height)?and it'll work just fine. Notice I left the absolute position for the parent and set it to 100% height, but didn't set any height for the sidebar which now fairly matches the actual size of the content panel.
当您设置高度时：100%；在 css 中，你必须问自己- “什么是 100%？” -... 这取决于你如何设置元素的位置。当你设置position:absolute; 那么它将是用户浏览器视图的 100%，否则它将是元素父高度的 100%。因此，如果您没有在某处设置适当的高度或绝对位置，您只会得到 100% 的空无（它会回滚到默认的内容调整高度）。
因此，让我们暂时考虑将父 div 的位置设为绝对位置并将其设置为100% 的高度（这样如果其高度设置为 100%，相对定位的子侧边栏将获得相同的高度）。这里有一个小提琴- 现在让我们看看我们有什么：我们有一个与用户浏览器视图一样高的父 div（黄色），但它的高度是固定的，不会改变以适应内容，然后我们有一个侧边栏（红色）匹配其父级的高度（因此它的高度不适合内容eather），最后我们有一个很长的内容文本（透明背景），它显然与父级 div 的高度重叠并落在了偏僻的地方。不好...
我们可以做什么？（似乎将父级的溢出设置为滚动不是一个好主意）...我们需要以正确的方式观察问题：您基本上有两个兄弟 div，并且您希望它们能够很好地适应它们的内容高度，但同时当您希望其中一个保持其兄弟姐妹的高度时-> 没有简单的 css 解决方案（我知道）。
最后，我的建议是使用一点 jquery：这里是快速设置，这里是完整站点。现在只写：
var height = $('.content').height() $('.sidebar').height(height)?它会工作得很好。请注意，我保留了父项的绝对位置并将其设置为 100% 高度，但没有为侧边栏设置任何高度，它现在与内容面板的实际大小相当匹配。
Hope this helps
希望这可以帮助
回答by Ryan Labelle
@Onheiron, your post was extremely helpful. Thank you!
@Onheiron，您的帖子非常有帮助。谢谢！
I added a line to my code because I noticed that short content pages did not extend all the way to the bottom of the page and caused the sidebar to stay short as well. Now the script checks to see what one (.content or body) has a greater height and then applies the same height to the .sidebar.
我在我的代码中添加了一行，因为我注意到短内容页面没有一直延伸到页面底部并导致侧边栏也保持简短。现在脚本会检查哪个（.content 或 body）具有更大的高度，然后将相同的高度应用于.sidebar.
HTML:
HTML:
<body>
<div class="sidebar"></div>
<div class="content"></div>
</body>
JavaScript:
JavaScript:
$(document).ready(function () {
var height1 = $('.content').height()
var height2 = $('body').height()
if (height1 > height2) {
$('.sidebar').height(height1)
} else {
$('.sidebar').height(height2)
}
});
CSS:
CSS:
body, .sidebar {
height:100%
}
Then lose the else part of the if statement as it will default to the css. No need for the script if the .contentarea is a lesser height than the body.
然后丢失 if 语句的 else 部分，因为它将默认为 css。如果该.content区域的高度低于身体，则不需要脚本。
回答by Jason
height:100%should work fine, but you have to make sure you make the containing div 100% as well.
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%;
}
