如何使两个并排的div保持相同的高度？
如何使两个并排的div保持相同的高度？
提问于 2010-06-08 21:39:54
我有两个并排的div。我希望它们的高度是相同的，如果其中一个调整了大小，也会保持不变。不过，我还是搞不懂这个。想法？
为了澄清我困惑的问题，我希望两个框的大小总是相同的，所以如果一个框因为放入文本而增长，另一个框应该增长到与高度匹配。
<div style="overflow: hidden">
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
Some content!
</div>
</div>
回答 18
Stack Overflow用户
回答已采纳
发布于 2013-12-19 06:13:06
Flexbox
在flexbox中，它是一个单独的声明：
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}<div class="row">
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>
较旧的浏览器可能需要前缀，请参阅browser support。
Stack Overflow用户
发布于 2010-06-08 22:02:24
这是一个CSS从未真正有过任何解决方案的领域--你只能使用<table>标签(或者使用CSS display:table*值来伪造它们)，因为这是唯一实现了“保持一堆元素高度不变”的地方。
<div style="display: table-row;">
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!
</div>
</div>它适用于所有版本的Firefox，Chrome和Safari，Opera从版本8开始，IE从版本8开始。
Stack Overflow用户
发布于 2013-02-06 10:21:06
令我惊讶的是，没有人提到(非常古老但可靠的)绝对列技术：http://24ways.org/2008/absolute-columns/
在我看来，它远远优于人造列和One True Layout技术。
一般的想法是，具有position: absolute;的元素将相对于具有position: relative;的最近父元素进行定位。然后，通过分配top: 0px;和bottom: 0px; (或实际需要的任何像素/百分比)来拉伸列以填充100%的高度。下面是一个例子：
<!DOCTYPE html>
<html>
<head>
<style>
#container
{
position: relative;
}
#left-column
{
width: 50%;
background-color: pink;
}
#right-column
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
width: 50%;
background-color: teal;
}
</style>
</head>
<body>
<div id="container">
<div id="left-column">
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
<div id="right-column">
Lorem ipsum
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2997767
复制相关文章
相似问题
腾讯云开发者
