私は午前中ずっとこの問題の解決策を探して試してみましたが成功しなかったので、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;
}