Html 如何制作一个延伸到页面长度的侧边栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14719323/
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 to make a sidebar that stretches to the page length?
提问by Click Upvote
If I set a min-height: 700px;on my sidebar, it works fine, however if the content length goes beyond 700 px, then the sidebar ends and the page content takes up the full width of the page. I want the sidebar to go down the length of the page, as long or short as the content is. How can this be done?
如果我min-height: 700px;在我的侧边栏上设置 a ，它工作正常，但是如果内容长度超过 700 像素，则侧边栏结束并且页面内容占据页面的整个宽度。我希望侧边栏沿着页面的长度向下移动，与内容一样长或短。如何才能做到这一点？
Here's my sidebar's css code:
这是我的侧边栏的 css 代码：
#sidebar
{
float: right;
min-height: 700px;
min-width: 25%;
background-color: #FFFFFF;
}
Changing the height to 100%causes the sidebar to disappear completely.
将高度更改为100%会导致侧边栏完全消失。
Here's the html code;
这是html代码；
<bod>
<div id="sidebar"></div>
<div id="content">Content here....</div>
</div>
回答by Ali Bassam
Give it a position:absolute;with bottom:0px;
给它一个position:absolute;与bottom:0px;
Check it out : http://jsfiddle.net/AliBassam/McJG8/
检查一下：http: //jsfiddle.net/AliBassam/McJG8/
HTML
HTML
<div id="parentDiv">
<div id="content">Content here....</div>
<div id="sidebar"></div>
</div>
CSS
CSS
#parentDiv
{
position:relative;
min-height:700px;
}
#sidebar
{
position:absolute;
right:0px;
bottom:0px;
top:0px;
width:100px;
}
The #parentDivnow have min-height:700px;if its stretched by its contents, the #sidebarwill stretch as well.
在#parentDiv现在min-height:700px;，如果它通过它的内容拉伸时，#sidebar将延伸为好。
回答by SAmetjan
Not knowing the exact requirements of what you're trying to do, this sounds like a solution that could easily be fixed using Faux Columns.
不知道您要做什么的确切要求，这听起来像是一个可以使用Faux Columns轻松修复的解决方案。
