CSS：如何让左浮动div动态调整高度？ [英] CSS: How to make left float div to adjust height dynamically?
本文介绍了CSS：如何让左浮动div动态调整高度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使我的浮动左div与静态内容自动调整其高度与右侧浮动div与动态内容的相同高度？
How can I make my floated left div with a static content to adjust automatically its height to the same height of the right floated div with a dynamic content?
我想要实现的是左右两个div将具有相同的高度（左div自动调整到右div的高度）
So what I am trying to accomplish is that the both left and right div will have the same height (left div adjusting automatically to the right div's height)
下面是示例代码
提前感谢：）
干杯，
标记
<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解决方案链接）：
Here is the working CSS solution (thanks to pdr for the 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>
这篇关于CSS：如何让左浮动div动态调整高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
