如何使div相对于父级高度为100％? [英] How to make div 100% height relative to parent?
问题描述
我坚持下面的内容.我需要将右上角的div设置为100％的高度(其bgcolor将覆盖主要div的整个高度).
I stuck with something like below. I need to make right-top div 100% height (its bgcolor will cover full height of main 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
推荐答案
我可能误解了这个问题(您到基于表的示例的链接无效)，但听起来您正在尝试创建两列高度相等.您可以使用多种技术，其中三种:
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:
-
您可以为每个
DIV提供一个较大的底部填充，以及一个同样大但为负的底部边距.
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;
}
这种解决方案并非没有问题.如果您尝试链接到其中一列中的元素(例如，您在其中一个列中使用id=foo链接到mypage.html#foo)，则布局将中断.使用这种技术也很难添加底部边框.
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=foo and you link to mypage.html#foo) then the layout will break. It's also hard to add bottom borders using this technique.
来自Natalie Downe的完整示例: http://natbat.net/code/clientside/css/equalColumnsDemo /10.html
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/
您可以通过提供#main包含两列背景的背景图像来伪造它.该技术被称为仿制圆柱"，当您需要复杂的背景或圆柱之间的装饰性边框时很有用.
You can fake it by giving #main a 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.
有关列表"的更多信息: http://www.alistapart.com/articles/fauxcolumns/
More information on A List Apart: http://www.alistapart.com/articles/fauxcolumns/
作为对此问题的一位评论者，您也可以使用一张桌子.但是，除非您显示表格数据，否则TABLE不是适当的HTML元素.
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.
这篇关于如何使div相对于父级高度为100％?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
