0

我整个上午都在寻找和尝试解决这个问题但没有成功，所以我想我会发表自己的帖子来了解为什么我不能让我的 3 个孩子 DIV 有一个相同的未指定高度（基于他们的父母）。

我需要有 3 列，其父级的 100% 高度，每个子 div 周围的边框和每个子 div 之间的边距。

到目前为止，这是我使用代码的地方：

HTML

<div class="outer">
    <div class="col1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam.</div>
    <div class="col2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida dictum odio accumsan aliquam. Curabitur tortor tortor, sodales vitae adipiscing vitae, tristique in sapien. Aenean interdum hendrerit quam, at semper risus pharetra ut. Morbi metus ipsum, sagittis ac rutrum faucibus, suscipit ut mauris. Nam eu felis felis. Nam et mi sit amet nisl euismod pharetra vitae id orci.</div>
    <div class="col3">Etiam ornare nibh non odio porta congue.</div>
</div>

CSS

.outer {
position:relative; 
height:auto; 
width:900px; 
}

.col1{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col2{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
margin-right: 10px;
border: 1px solid black;
}

.col3{
float: left;
    position:relative; 
min-height:100%; 
width:200px; 
border: 1px solid black;
}
4

3 回答 3

2

将您的外部 div 高度形式自动更改为类似的东西400px，它会起作用。

这是给你的小提琴..

http://jsfiddle.net/vbEXB/3/

相关讨论在这里..

将 div 高度设置为父级的 100%

编辑：

和

对以下问题的回答为您提供了不涉及固定高度的纯 CSS 解决方案（因此它涵盖了 99% 的情况:)）

如何在不指定父母高度的情况下将子 Div 强制为父母 Div 的 100%？

于 2012-07-03T14:20:14.660 回答
1

如果没有 jQuery/JavaScript，我永远无法弄清楚如何做到这一点。据我所知，这对于严格的 CSS 和 HTML 是不可能的。您可能必须使用 jQuery。查看提供的链接。这应该为您指明正确的方向。

http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html

希望这可以帮助！

于 2012-07-03T14:18:00.270 回答
0

如果没有指定父级的高度，这是一项非常艰巨的工作。对于包括边框和边距，您可以使用

box-sizing:border-box;

根据您的用例，尝试将 table-layout 作为 div 上的显示属性。如果您知道父级的高度，请设置一个高度。或者尝试使用绝对定位的布局并指定所有边（例如position:absolute;left:0;top:0;bottom:0;right:33%;左列）。为此，您本身不需要 javascript，但这取决于您要实现的目标。

SO上有很多关于相等列布局的问题。我相信你会通过搜索找到答案。

如果你觉得很花哨，你可能想使用带有糟糕IE 支持的flex-box，但它完全可以实现你想要的，而不需要模糊。查看更多信息：

于 2012-07-03T14:21:01.330 回答