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

Question

我整个上午都在搜索并尝试解决这个问题，但没有成功，所以我想我应该发表自己的帖子来理解为什么我不能让我的 3 个子 DIV 具有相同的未指定高度基于他们的 parent 。

我需要有 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;
}

Answer 1

将您的外部 div 高度自动更改为 400px 之类的值，它会起作用。

这是给你的 fiddle ..

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?