0
各3列の下のコンテンツをクリアする方法がわかりません。各div列には、いくつかの中央揃えのテキストのスパンとスパンの下のテキストエリアが含まれています。問題は、または少なくとも私が思うに、divタグが浮動している、私はそれらを適切にクリアしていないということです。CSS：3列のdivレイアウトの後に内容を消去する
Firefoxは、最初の列の上の列（私の場合はボタン）の後に次の要素を浮かべます。私のローカルファイルはInternet Explorerで完璧にレンダリングされます（しかし、IEはそれを取り除くために独自の囲みを追加していると仮定しています。しかし、IEのjsFiddleコードを見ると、テキストエリアは100％の高さを維持しません。私はjsFiddleがIEのQuirksモードでHTMLをレンダリングしないと仮定しています（これが私のローカルファイルと異なっています）。
私はHoly Grail記事、w3schools記事、clear:after fix品、およびいくつかの他の記事（div column layout）を見てきましたが、両方のブラウザで実用的なソリューションを考え出すことができませんでした。
ここは私のjsFiddle codeです。ここに私のコードです。ご覧のように、私のコードには複数のメソッドがありますので、混乱して申し訳ありません。
site.html
<html>
<head>
<link type="text/css" rel="stylesheet" href="site.css" />
</head>
<body>
<div id="top" class="clearfix">
<div class="column">
<span>blah1</span>
<textarea class="text"></textarea>
</div>
<div class="column">
<span>blah2</span>
<textarea class="text"></textarea>
</div>
<div class="column clearfix">
<span>blah3</span>
<textarea class="text"></textarea>
</div>
<div class="clearing"> </div>
</div>
<div id="center">
<span>blah blah blah</span>
<input type="button" value="Button" />
</div>
</body>
</html>
site.css
body, html {
height: 100%;
width: 100%;
}
body {
padding: 0;
border: 0;
margin: 0;
}
#top {
height: 40%;
display: block;
width: 100%;
float: left;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.column {
width: 33%;
float: left;
height: 100%;
text-align: center;
}
.clearing {
height: 0;
clear: both;
}
.text {
width: 100%;
height: 100%;
}
#center {
clear: both;
}
それは問題を解決している、私はoverflow: hidden (and auto)に追加しようとしたことに注意することも良いことだが、私私のテキストエリア全体を見たいと思って...それを隠さずに/それをスクロールさせてください。任意の提案やアイデアをいただければ幸いです。
いいえ、問題を修正しませんでした。 – incutonez
私はまた、固定幅を使用することを検討していない...私はパーセンテージが好きです。 :) – incutonez
それは重なり合っている理由は、テキストエリアをコンテナの100％として表示しているためです。内側の高さがテキストエリア（100％）+スパンであるため、スパンのサイズによってオーバーラップしています。テキストエリアを80％、スパンを20％にするか、レイアウトする方法を再考する必要があります。 –