HTML/CSS 全高侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6922755/
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
HTML/CSS full height sidebar
提问by Steven Zezulak
I've found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.
我在互联网上发现了很多与这个问题有关的讨论和问题，但是，它们似乎都与我的情况不符，并且解决方案非常特定于某种情况。
I have a headerelement with a height of 100pxat the top of the page. I have a div#sidebarelement floated left with a width of 250px, and finally a div#mainelement also floated left.
我在页面顶部header有一个高度为的元素100px。我有一个div#sidebar元素向左浮动，宽度为250px，最后一个div#main元素也向左浮动。
The height of html, body, and div#sidebaris 100%.
的高度html，body以及div#sidebar为100%。
My goal is to get div#sidebarto extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.
我的目标是div#sidebar无论浏览器大小或内容大小如何，都能一直延伸到页面底部。显然，如果内容比可查看的页面高度长，它应该正常运行并推过页面的末尾，引入滚动条。
However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebardown. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I've been at this for well over an hour and I'm about to rip my hair out.
但是，就目前而言，页面高度似乎已计算为100% + 100px，即使没有div#sidebar向下推的内容，也会引入滚动条。到目前为止，我还没有找到有效的解决方案，或者我错过了它或者搞砸了一个解决方案；无论如何，我已经在这里呆了一个多小时了，我快要把头发扯掉了。
Is there a non-JavaScript method of getting this to work properly to stop the header's height being added to 100%?
是否有一种非 JavaScript 方法可以使其正常工作以停止header添加到 的高度100%？
Here is my HTML/CSS - although I included all relevant details above, this should help.
这是我的 HTML/CSS - 尽管我在上面包含了所有相关细节，但这应该会有所帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My Awesome Template!</title>
<link href="./stylesheet.css" rel="stylesheet" />
</head>
<body>
<header id="primary">
<h1>My Awesome Template!</h1>
</header>
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="main">
<h1>Main</h1>
</div>
</body>
</html>
CSS:
CSS：
html, body
{
margin: 0;
padding: 0;
height: 100%;
}
body
{
background: #fff;
font: 14px/1.333 sans-serif;
color: #080000;
}
header#primary
{
width: 100%;
height: 100px;
background: #313131;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
background-image: -moz-linear-gradient(#4d4d4d, #313131);
background-image: -o-linear-gradient(#4d4d4d, #313131);
background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
margin: 0px 0px 0px 20px;
padding: 0px;
line-height: 100px;
color: #ffffff;
}
#sidebar
{
float: left;
width: 250px;
background: #ccc;
min-height: 100%;
}
#main
{
float: left;
}
采纳答案by Iterate
You're looking for the infamous "faux-columns" technique. Here's a tutorial.
您正在寻找臭名昭著的“假柱”技术。这是一个教程。
Basically, you can't do it with a simple background color, you have to use a repeating background image.
基本上，你不能用简单的背景颜色来做，你必须使用重复的背景图像。
回答by Murray Jensen
I found that the method outlined in this articlewas a very simple method for solving the problem.
我发现本文介绍的方法是一种非常简单的解决问题的方法。
You need to surround your #sidebar and #main divs with another div, so your html code becomes:
你需要用另一个 div 包围你的 #sidebar 和 #main div，所以你的 html 代码变成：
...
<div id="content">
<div id="sidebar">
<h1>Sidebar</h1>
</div>
<div id="main">
<h1>Main</h1>
</div>
</div>
...
and then the following css will do something close to what you want:
然后下面的 css 会做一些接近你想要的东西：
#content {
position: relative;
width: 100%;
}
#sidebar {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 240px;
}
#main {
position: relative;
margin-left: 250px;
}
(with a bit of tweaking e.g. I found that the margin of the h1 in #main seemed to be ignored ... but the margin of the h1 on #sidebar was not!).
（稍微调整一下，例如我发现#main 中h1 的边距似乎被忽略了......但#sidebar 上h1 的边距却没有！）。
回答by Madara's Ghost
If you don't care about lower IE, use display: tableon a parent and display: table-cellon the elements. This should fix their heights together. As for the gap, use margin-top: -100 px; padding-top: 100px;
如果您不关心较低的 IE，请display: table在父级和display: table-cell元素上使用。这应该将它们的高度固定在一起。至于间隙，使用margin-top: -100 px; padding-top: 100px;
回答by Jeff
Not sure if you tried this, or if it will work for you (I'm new to coding), but try floating your sidebar left, float content right, both text-align to left, and use percentages for width.
不确定您是否尝试过这个，或者它是否适合您（我是编码新手），但是尝试将侧边栏向左浮动，将内容向右浮动，文本都向左对齐，并使用百分比表示宽度。
#sidebar
{
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
}
#main
{
float: right;
text-align: left;
width: 70%;
}
If you have any other settings you will have to approach those differently but this might work.
如果您有任何其他设置，您将不得不以不同的方式处理这些设置，但这可能会奏效。
回答by John Louie Bi?as
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
You can do that by this jquery code. Calling the main content height.
你可以通过这个 jquery 代码来做到这一点。调用主要内容高度。
回答by Joe Conlin
jQuery elegantly handles this with ease so I'm not sure why you wouldn't want to use js. Most developers that have coded more than a couple sites have spent considerable time searching for the magic answer, as I have have, and nothing compares to using js.
jQuery 轻松优雅地处理了这个问题，所以我不知道你为什么不想使用 js。大多数编写了多个站点的开发人员都花费了大量时间来寻找神奇的答案，就像我一样，没有什么比使用 js 更好的了。
