CSS 侧边栏高度 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/791231/
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
CSS Sidebar Height 100%
提问by Jon
I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:
我一直在用头撞墙几个小时试图找出这个问题，并认为它一定是我遗漏的小东西。我在网上搜索过，但我发现的任何东西似乎都不起作用。HTML是：
<body>
<div id="header">
<div id="bannerleft">
</div>
<div id="bannerright">
<div id="WebLinks">
<span>Web Links:</span>
<ul>
<li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
<li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
<li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
</ul>
</div>
</div>
</div>
<div id="Sidebar">
<div id="SidebarBottom">
</div>
</div>
<div id="NavigationContainer">
<ul id="Navigation">
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
<li><a href="#">Nav</a></li>
</ul>
</div>
<div id="Main">
<!-- content -->
</div>
</body>
My full CSS is:
我的完整 CSS 是：
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri, Sans-Serif;
height: 100%;
}
#header {
width: 100%;
z-index: 1;
height: 340px;
background-image: url("../../Content/images/bannercenter.gif");
background-repeat: repeat-x;
}
#header #bannerleft {
float: left;
background-image: url("../../Content/images/bannerleft.gif");
background-repeat: no-repeat;
height: 340px;
width: 439px;
z-index: 2;
}
#bannerright {
float: right;
background-image: url("../../Content/images/bannerright.gif");
background-repeat: no-repeat;
width: 382px;
height: 340px;
background-color: White;
z-index: 2;
}
#Sidebar {
width: 180px;
background: url("../../Content/images/Sidebar.png") repeat-y;
z-index: 2;
height: 100%;
position: absolute;
}
#SidebarBottom {
margin-left: 33px;
height: 100%;
background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}
#NavigationContainer {
position: absolute;
top: 350px;
width: 100%;
background-color: #bbc4c3;
height: 29px;
z-index: 1;
left: 0px;
}
#Navigation {
margin-left: 190px;
font-family: Calibri, Sans-Serif;
}
#Navigation li {
float: left;
list-style: none;
padding-right: 3%;
padding-top: 6px;
font-size: 100%;
}
#Navigation a:link, a:active, a:visited {
color: #012235;
text-decoration: none;
font-weight: 500;
}
#Navigation a:hover {
color: White;
}
#WebLinks {
float: right;
color: #00324b;
margin-top: 50px;
width: 375px;
}
#WebLinks span {
float: left;
margin-right: 7px;
margin-left: 21px;
font-size: 10pt;
margin-top: 8px;
font-family: Helvetica;
}
#WebLinks ul li {
float: left;
padding-right: 7px;
list-style: none;
}
#WebLinks ul li a {
text-decoration: none;
font-size: 8pt;
color: #00324b;
font-weight: normal;
}
#WebLinks ul li a img {
border-style: none;
}
#WebLinks ul li a:hover {
color: #bcc5c4;
}
I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.
我希望侧边栏与我的页面内容一起在高度上拉伸，并将侧边栏底部图像始终保留在侧边栏底部。
采纳答案by Arve Systad
UPDATE:As this answer is still getting votes both up and down, and is at the time of writing eight yearsold: There are probably better techniques out there now. Original answer follows below.
更新：由于这个答案仍然获得了上下投票，并且在撰写本文时已有八年历史：现在可能有更好的技术。原答案如下。
Clearly you are looking for the Faux columnstechnique :-)
显然，您正在寻找人造柱技术:-)
By how the height-property is calculated, you can't set height: 100%inside something that has auto-height.
根据高度属性的计算方式，您无法height: 100%在具有自动高度的内容中进行设置。
回答by montrealmike
This worked for me
这对我有用
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -5000px; /* any large number will do */
padding-bottom: 5000px;
....
}
回答by Adam Grant
Until CSS's flexbox becomes more mainstream, you can always just absolutely position the sidebar, sticking it zero pixels away from the top and bottom, then set a margin on your main container to compensate.
在 CSS 的 flexbox 变得更加主流之前，您始终可以绝对定位侧边栏，将其固定在距离顶部和底部零像素的位置，然后在主容器上设置边距以进行补偿。
JSFiddle
JSFiddle
HTML
HTML
<section class="sidebar">I'm a sidebar.</section>
<section class="main">I'm the main section.</section>
CSS
CSS
section.sidebar {
width: 250px;
position: absolute;
top: 0;
bottom: 0;
background-color: green;
}
section.main { margin-left: 250px; }
Note: This is an über simple way to do this but you'll find bottomdoes not mean "bottom of page," but "bottom of window." The sidebar will probably abrubtly end if your main content scrolls down.
注意：这是一种非常简单的方法，但您会发现bottom这不是“页面底部”，而是“窗口底部”。如果您的主要内容向下滚动，侧边栏可能会突然结束。
回答by Danield
I would use css tablesto achieve a 100% sidebar height.
我会使用css 表格来实现 100% 的侧边栏高度。
The basic idea is to wrap the sidebar and main divs in a container.
基本思想是将侧边栏和主 div 包装在一个容器中。
Give the container a display:table
给容器一个 display:table
And give the 2 child divs (sidebar and main) a display: table-cell
并给 2 个子 div（侧边栏和主）一个 display: table-cell
Like so..
像这样..
#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}
Take a look at this LIVE DEMOwhere I have modified your initial markup using the above technique (I have used background colors for the different divs so that you can see which ones are which)
看看这个LIVE DEMO，我使用上述技术修改了您的初始标记（我为不同的 div 使用了背景颜色，以便您可以看到哪些是哪些）
回答by hawkeye126
Flexbox (http://caniuse.com/#feat=flexbox)
弹性盒 ( http://caniuse.com/#feat=flexbox)
First wrap the columns you want in a div or section, ex:
首先将所需的列包装在 div 或 section 中，例如：
<div class="content">
<div class="main"></div>
<div class="sidebar"></div>
</div>
Then add the following CSS:
然后添加以下 CSS：
.content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
回答by Lloyd Jones
Further to @montrealmike 's answer, can I just add my adaptation?
除了@montrealmike 的回答之外，我可以添加我的改编吗？
I did this:
我这样做了：
.container {
overflow: hidden;
....
}
#sidebar {
margin-bottom: -101%;
padding-bottom: 101%;
....
}
I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!
我做了“101%”的事情来满足（非常罕见的）有人可能在高度超过 5000 像素的大屏幕上查看网站的可能性！
Great answer though, montrealmike. It worked perfectly for me.
很好的答案，蒙特利尔迈克。它非常适合我。
回答by TheLibzter
I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.
我在不同的项目中多次遇到过这个问题，但我找到了一个适合我的解决方案。您必须使用四个 div 标签 - 一个包含侧边栏、主要内容和页脚。
First, style the elements in your stylesheet:
首先，为样式表中的元素设置样式：
#container {
width: 100%;
background: #FFFAF0;
}
.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}
.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}
#footer {
clear:both;
background:#FFFAF0;
}
You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.
您可以根据需要编辑不同的元素，只要确保不要更改页脚属性“clear:both”——这是非常重要的。
Then, simply set up your web page like this:
然后，只需像这样设置您的网页：
<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>
I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!
我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container 上写了一篇关于此的更深入的博客文章。请让我知道，如果你有任何问题。希望这可以帮助！
回答by strager
Perhaps Multi-Column Layouts Climb Out of the Boxis what you're looking for?
也许多列布局开箱即用是您正在寻找的？
回答by Frank L?mmer
i guess, today one would probably use flexbox for this. See the holy grail example.
我想，今天人们可能会为此使用 flexbox。请参阅圣杯示例。
回答by Krizzz
I was facing the same problem as Jon. TheLibzter put me on the right track, but the image that has to stay at the bottom of the sidebar was not included. So I made some adjustments...
我和乔恩面临着同样的问题。TheLibzter 让我走上了正轨，但没有包含必须留在侧边栏底部的图像。所以我做了一些调整......
Important:
重要的：
- Positioning of the div which contains the sidebar and the content (#bodyLayout). This should be relative.
- Positioning of the div that has to stay at the bottom of the sidbar (#sidebarBottomDiv). This should be absolute.
- The width of the content + the width of the sidebar must be equal to the width of the page (#container)
- 包含侧边栏和内容 (#bodyLayout) 的 div 的定位。这应该是相对的。
- 必须留在 sidbar 底部的 div (#sidebarBottomDiv) 的定位。这应该是绝对的。
- 内容宽度+侧边栏宽度必须等于页面宽度（#container）
Here's the css:
这是CSS：
#container
{
margin: auto;
width: 940px;
}
#bodyLayout
{
position: relative;
width: 100%;
padding: 0;
}
#header
{
height: 95px;
background-color: blue;
color: white;
}
#sidebar
{
background-color: yellow;
}
#sidebarTopDiv
{
float: left;
width: 245px;
color: black;
}
#sidebarBottomDiv
{
position: absolute;
float: left;
bottom: 0;
width: 245px;
height: 100px;
background-color: green;
color: white;
}
#content
{
float: right;
min-height: 250px;
width: 695px;
background-color: White;
}
#footer
{
width: 940px;
height: 75px;
background-color: red;
color: white;
}
.clear
{
clear: both;
}
And here's the html:
这是 html：
<div id="container">
<div id="header">
This is your header!
</div>
<div id="bodyLayout">
<div id="sidebar">
<div id="sidebarTopDiv">
This is your sidebar!
</div>
<div id="content">
This is your content!<br />
The minimum height of the content is set to 250px so the div at the bottom of
the sidebar will not overlap the top part of the sidebar.
</div>
<div id="sidebarBottomDiv">
This is the div that will stay at the bottom of your footer!
</div>
<div class="clear" />
</div>
</div>
</div>
<div id="footer">
This is your footer!
</div>
