Question

我坚持使用下面的内容。我需要制作右上角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>

这里的工作示例： http://marioosh.net/lay1.html

使用表格很简单： http://marioosh.net/lay2.html

Answer 1

我可能误解了这个问题（你对基于表格的例子的链接不起作用），但听起来你正试图创建两个高度相等的列。您可以使用几种技术，其中有三种：

您可以为每个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提供包含两列背景的背景图片来伪造它。这种技术被称为“Faux Columns”，当您需要复杂的背景或列之间的装饰边框时，它非常有用。

有关A List Apart的更多信息：http://www.alistapart.com/articles/fauxcolumns/

作为该问题的一位评论者，您也可以使用表格。但是，除非您显示表格数据，否则TABLE不是合适的HTML元素。

Answer 2

您需要设置父元素的高度以使高度达到100％。如果你将两者都设置为高度100％，你应该得到你正在寻找的效果

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

2 个答案: