javascript 使用带有固定页眉和页脚的 css 的可变内容 div 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6503035/
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
Variable content div height using css with fixed header and footer
提问by Nabeel
I'm having a bit of trouble with some CSS, and am seeking some help from this wonderful community.
我在使用某些 CSS 时遇到了一些麻烦，正在向这个美妙的社区寻求帮助。
I am trying to build a layout containing the following elements:
我正在尝试构建一个包含以下元素的布局：
1) A header area 2) A footer area 3) A left hand pane 4) A content area
1) 页眉区域 2) 页脚区域 3) 左侧窗格 4) 内容区域
I have come up with the following CSS, but I do not believe this is the best way of doing what I need.
我想出了以下 CSS，但我不相信这是做我需要的最佳方式。
Please find below an image of what I am looking for, with all the details. Additionally, below is my current CSS and html.
请在下面找到我正在寻找的图片，以及所有细节。此外，下面是我当前的 CSS 和 html。
CSS:
CSS：
* {
margin: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#leftbar {
float: left;
width: 350px;
background-color: #EAEAEA;
height: 100%;
position: absolute;
z-index: -1;
}
#rightbar {
}
#footer {
height: 100px;
}
#header {
height: 100px;
}
HTML:
HTML：
<div id="wrapper">
<div id="header"> </div>
<div id="content">
<div id="leftbar"> </div>
<div id="rightbar"> </div>
</div>
</div>
<div id="footer"> </div>
Desired layout:
所需布局：
Please note that although I don't mind using jQuery and javascript to accomplish this, I'd like to avoid it.
请注意，虽然我不介意使用 jQuery 和 javascript 来实现这一点，但我想避免它。
Any help will be greatly appreciated.
任何帮助将不胜感激。
Thanks!
谢谢！
采纳答案by Spycho
Does this fiddlemeet your requirements? I couldn't quite tell whether you wanted the footer to always be at the bottom of the page or not.
难道这小提琴满足您的要求？我不太清楚您是否希望页脚始终位于页面底部。
Update
更新
This fiddlehas the footer always at the bottom.
这个小提琴的页脚总是在底部。
回答by SpliFF
回答by jensgram
The article In Search of the Holy Grailon A List Apart comes up with a three-column layout that fits your description. I'd suggest you take a look at the article and omit the #rightcolumn altogether.
文章In Search of the Holy Grailon A List Apart 提出了符合您描述的三栏布局。我建议你看一下这篇文章，#right完全省略这个专栏。
回答by Aaron Digulla
Use a tableor display: table-cellfor content which has to have the same height.
对必须具有相同高度的内容使用table或display: table-cell。
[EDIT]A three column layout with a table is done in a couple of minutes and it works.
[编辑]一个带有表格的三列布局在几分钟内完成并且它有效。
All those hacks using floating divs just create brittle layouts which sometimes work and sometimes fail. They are hard to debug, hard to get right and need a lot of CSS styles and HTML code. For little return. So if you want to waste a couple of days to get it to work, by all means use floating divs.
所有这些使用浮动 div 的 hack 只会创建脆弱的布局，有时会起作用有时会失败。它们很难调试，很难做到正确，并且需要大量的 CSS 样式和 HTML 代码。回报微乎其微。因此，如果您想浪费几天时间让它工作，请务必使用浮动divs。
It's not my fault that someone said "tables are bad." It's like saying "the sun is bad because it burns you." Well, use it appropriately.
有人说“桌子不好”不是我的错。这就像说“太阳很糟糕，因为它会灼伤你”。嗯，适当地使用它。
