Html CSS：如何使左浮动 div 动态调整高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2331717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: How to make left float div to adjust height dynamically?
提问by marknt15
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 相同的高度？
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)
所以我想要完成的是左右 div 将具有相同的高度（左 div 自动调整到右 div 的高度）
Below is the sample code.
下面是示例代码。
Thanks in advance :)
提前致谢 ：）
Cheers, Mark
干杯，马克
<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>
采纳答案by marknt15
Here is the working CSS solution (thanks to pdr for the link):
这是有效的 CSS 解决方案（感谢 pdr 提供链接）：
<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>
回答by Nasser Hadjloo
If I were you, I use a simple CSS trick. I'd assign the height for .Left and .Right in a css class like this
如果我是你，我会使用一个简单的 CSS 技巧。我会在这样的 css 类中为 .Left 和 .Right 分配高度
.Left, .Right
{
min-height: 200px; /*because of .Left*/
height: auto;
}
note that the above code uses whenever your height goes more than 200px then it will override the 200px value.
请注意，只要您的高度超过 200 像素，就会使用上面的代码，然后它将覆盖 200 像素的值。
hope this help
希望这有帮助
Complete answer with Javascript
用 Javascript 完成答案
<script>
function increaseHeight()
{
Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height;
}
</script>
and you have to call it whenever youfinished increasing size of right div
当你完成增加右 div 的大小时你必须调用它
回答by Marius
A List Aparthas a few excellent article on this subject, for example Faux Columnsand Multi-column layouts climb out of the box
A List Apart有一些关于这个主题的优秀文章，例如Faux Columns和Multi-column layouts 爬出盒子
回答by pdr
There are a number of options listed here
这里列出了许多选项
http://www.ejeliot.com/blog/61
http://www.ejeliot.com/blog/61
Generally, I think you might want to ask yourself if you really want two columns. It could be that you're better off with your static content in the parent div and your dynamic content in a child div ([Edit] or vice versa).
通常，我认为您可能要问自己是否真的需要两列。可能你最好在父 div 中使用静态内容，在子 div 中使用动态内容（[编辑]，反之亦然）。
回答by shahjapan
try out following code, I tried with firefox but hope it would work on most of all browsers
试试下面的代码，我用 firefox 试过，但希望它能在大多数浏览器上工作
<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;
}
.parent_new {
border:1px solid red;
width:530px;
padding:5px;
display: table-cell;
}
.row_level
{
display:table-cell;
}
.cell-level {
display:table-cell;
border:1px solid red;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
}
.left {
border:1px solid blue;
width:200px;
float:left;
position:relative;
padding:3px;
display:table-row;
}
.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_new">
<div class="row_level">
<div class="cell-level">float left div here only static content
</div>
<div class="cell-level">
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>
<div class="clr"></div>
<div class="footer">Footer here</div>
</div>
</body>
</html>
