设置div的高度以占据内容布局 [英] Set div's height to occupy the contents layout
本文介绍了设置div的高度以占据内容布局的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想达到以下效果：
I want to achieve the following:
- 主div和sidebardiv应该有相同的高度，可能是浏览器的屏幕高度或700px）根据内容，最大高度不受限制。
- contentdiv应该包裹它们（两者的高度和宽度相同） >
- "Main" div and sidebar "div" should have same height, with minimum height (maybe browser's screen height or 700px) maximum height is not limited - according to the contents.
- The "content" div should wrap them(same height and width of both of them)
标记：
Markup:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="content">
<div id="main">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<div id="sidebar"></div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
CSS：
CSS:
body, html
{
margin: 0;
padding: 5px;
color: #000;
background: #ace187;
height:100%;
}
#wrap
{
width: 752px;
height:100%;
margin: 0 auto;
}
#content
{
border: 1px solid #000000;
height: 100%;
background-color: #dbeef8;
}
#main
{
float: left;
width: 506px;
padding: 10px;
border: thin dashed green;
height: 100%;
}
#sidebar
{
border: thin dashed #FF0000;
float: right;
width: 200px;
padding: 10px;
height: 100%;
}
#footer
{
clear: both;
padding: 5px 10px;
background: #cc9;
}
注意：有一个wrapdiv，它也是必需的，因为它包装我省略了一个标题。
note: there is a "wrap" div and it's also needed because it wraps a header that i omitted.
推荐答案
纯CSS等高度的列。自从您提出要求后，我添加了最小高度。有一个IE6黑客纯粹的最低高度，因为IE6不理解最小高度，但将高度视为最小高度。这是这个条纹的版本.. http：// matthewjamestaylor。 com / blog / equal-columns-2-column.htm
Equal height columns with pure CSS. I added a min-height since you asked for it. There is the one IE6 hack purely for the min-height since IE6 doesn't understand min-height, but treats height as min-height. This is a striped down version of this.. http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7;}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
_height:700px;
min-height:700px;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
_height:700px;
min-height:700px;
}
<div id="container2">
<div id="container1">
<div id="col1">
<p>some text</p>
</div>
<div id="col2">
<p>some text</p>
</div>
</div>
这篇关于设置div的高度以占据内容布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
