参见英文答案 >
HTML/CSS: Making two floating divs the same height12个答案如何用静态内容将浮动的left div自动调整为与动态内容相同的浮动div的高度？
所以我想要完成的是，左右div将具有相同的高度(左边的div自动调整到正确的div的高度)
以下是示例代码。
提前致谢 ：)
干杯，
标记
<html>
<head>
<style type="text/css">
body {
font-family:verdana;
font-size:12px;
}
.parent {
border:1px solid red;
width:530px;
/*min-height:100%;*/
padding:5px;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.right {
border:1px solid green;
width:300px;
float:right;
position: relative;
padding:3px;
}
.clr { clear:both; }
.footer {
border:1px solid orange;
position: relative;
padding:3px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">float left div here only static content</div>
<div class="right">
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
float right div dynamic content here<br />
</div>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
解决方法
这是工作的CSS解决方案(感谢pdr for
link)：
<html>
<head>
<style type="text/css">
html,body {
font-family:verdana;
font-size:12px;
}
.parent {
border:1px solid red;
width:530px;
padding:5px;
overflow:hidden;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.right {
border:1px solid green;
width:300px;
float:right;
position: relative;
padding:3px;
}
/* a solution but doesn't work in IE */
/*
.left,.right {
min-height: 100px;
height: auto;
}
*/
.left,.right {
padding-bottom:8000px;
margin-bottom:-8000px;
background:none repeat scroll 0 0 lightblue;
}
.clr { clear:both; }
.footer {
border:1px solid orange;
position: relative;
padding:3px;
margin-top:5px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">float left div here only static content</div>
<div class="right">
float right div dynamic content here<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
dynamic row<br />
</div>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
