如何使div相对于父母100％的身高？

Question

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

Answer 1

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 DIV a large bottom padding, and an equally large, but negative, bottom margin. 您可以为每个DIV一个较大的底部填充，以及一个同样大但负的底部边距。
```
 #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 (eg you have an element in one of the columns with id=foo and you link to mypage.html#foo ) then the layout will break. 如果您尝试链接到其中一列中的元素（例如，您在其中一列中有一个元素，其id=foo并且您链接到mypage.html#foo ），那么布局将会中断。 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 来自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/ 有关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 #main a background image that includes the background for both columns. 您可以通过为#main提供包含两列背景的背景图像来伪造它。 This technique is known as “Faux Columns” and is useful when you want complex backgrounds, or a decorative border between the columns. 这种技术称为“Faux Columns”，当您需要复杂背景或列之间的装饰边框时，此技术非常有用。
More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/ 有关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 TABLE is not the appropriate HTML element. 但是，除非您显示表格数据，否则TABLE不是合适的HTML元素。

Answer 2

You need to set heights of the parent elements to enable height of 100%. 您需要设置父元素的高度以使高度达到100％。 If you set both to height 100% you should get the effect you're looking for 如果你将两者都设置为高度100％，你应该得到你正在寻找的效果

如何使div相对于父母100％的身高？

问题描述

2 个解决方案

解决方案1
5 2012-02-05 20:26:16

解决方案2
-2 2011-01-21 08:51:02

如何使div相对于父母100％的身高？

问题描述

2 个解决方案

解决方案1 5 2012-02-05 20:26:16

解决方案2 -2 2011-01-21 08:51:02

解决方案1
5 2012-02-05 20:26:16

解决方案2
-2 2011-01-21 08:51:02