Html 如何使 div 相对于父级的高度为 100%？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4756872/
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 div 100% height relative to parent?
提问by marioosh
I stuck with something like below. I need to make right-top div 100% height (its bgcolor will cover full height of main div).
我坚持像下面这样。我需要使右上角的 div 高度为 100%（它的 bgcolor 将覆盖主 div 的整个高度）。
<body>
<div id="main" style="width: 800px; margin: auto; text-align: left; border: 1px solid #628221; padding: 2px; background-color: #fff;">
<div id="left" style="float: left; width: 600px; background-color: #A7C864;">
<div id="left-top">left-top</div>
<div id="left-bottom">left-bottom</div>
</div>
<div id="right" style="float: right; width: 200px; background-color: #C7E48E;">
<div id="right-top">right-top</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
Working example here: http://marioosh.net/lay1.html
这里的工作示例：http: //marioosh.net/lay1.html
Using table it is easy: http://marioosh.net/lay2.html
使用表格很容易：http: //marioosh.net/lay2.html
回答by georgebrock
I may be misunderstanding the question (your link to the table-based example isn't working), but it sounds like you're trying to create two columns with equal height. There are several techniques you can use, here are three of them:
我可能误解了这个问题（您指向基于表格的示例的链接不起作用），但听起来您正在尝试创建具有相同高度的两列。您可以使用多种技术，以下是其中三种：
You can give each
DIVa large bottom padding, and an equally large, but negative, bottom margin.#main { overflow: hidden; } #left, #right { float: left; padding-bottom: 1000em; margin-bottom: -1000em; }This solution is not without it's problems; if you attempt to link to an element in one of the columns (e.g. you have an element in one of the columns with
id=fooand you link tomypage.html#foo) then the layout will break. It's also hard to add bottom borders using this technique.Full example from Natalie Downe: http://natbat.net/code/clientside/css/equalColumnsDemo/10.html
You can give one of the columns a negative right margin, and the other a very wide left border.
#left, #right { float: left; } #left { background: red; width: 200px; margin-right: -200px; } #right { border-left: 200px solid red; }More information on Smashing Magazine: http://coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
You can fake it by giving
#maina background image that includes the background for both columns. This technique is known as “Faux Columns” and is useful when you want complex backgrounds, or a decorative border between the columns.More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/
你可以给每
DIV一个大的底部填充，和一个同样大但负的底部边距。#main { overflow: hidden; } #left, #right { float: left; padding-bottom: 1000em; margin-bottom: -1000em; }这个解决方案并非没有问题；如果您尝试链接到其中一列中的元素（例如，您在其中一列中有一个元素，
id=foo并且您链接到mypage.html#foo），则布局将中断。使用这种技术添加底部边框也很困难。来自 Natalie Downe 的完整示例：http: //natbat.net/code/clientside/css/equalColumnsDemo/10.html
您可以给其中一列一个负的右边距，给另一列一个非常宽的左边框。
#left, #right { float: left; } #left { background: red; width: 200px; margin-right: -200px; } #right { border-left: 200px solid red; }有关 Smashing Magazine 的更多信息：http: //coding.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/
您可以通过提供
#main包含两列背景的背景图像来伪造它。这种技术被称为“仿列”，当您需要复杂的背景或列之间的装饰边框时非常有用。有关 A List Apart 的更多信息：http: //www.alistapart.com/articles/fauxcolumns/
As one commenter on the question noted, you can also use a table. However, unless you're displaying tabular data TABLEis not the appropriate HTML element.
正如该问题的一位评论者所指出的，您也可以使用表格。但是，除非您显示表格数据TABLE不是合适的 HTML 元素。
回答by James Lelyveld
You need to set heights of the parent elements to enable height of 100%. If you set both to height 100% you should get the effect you're looking for
您需要设置父元素的高度以启用 100% 的高度。如果您将两者都设置为高度 100%，您应该会得到您想要的效果
