Question

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

我需要有3列，父母的100％高度，每个子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;
}

Answer 1

将您的外部div高度表单自动更改为400px，并且它会起作用。

这是你的小提琴..

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

这里的相关讨论..

Set div height to 100% of parent

修改：

和

回答下面的问题给出了纯css解决方案，它不涉及固定高度（所以它覆盖了99％的情况:)）

How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?

Answer 2

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

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

希望这有帮助！

Answer 3

如果父母没有指定的身高，这是一项非常艰巨的工作。要包含边框和边距，您可以使用

box-sizing:border-box;

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

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

如果你觉得有点想象，你可能想要使用带有可怕IE-support的弹性盒，但它可以完全达到你想要的效果而不用模糊。有关详细信息，请参阅：

CSS Child Div用边框和边距填充100％的父级

3 个答案: