0

3つのdiv列の下のコンテンツをクリアする方法がわかりません。各div列には、中央にテキストがあるスパンと、スパンの下にテキストエリアが含まれています。問題は、少なくとも私が思うに、divタグがフロートされており、適切にクリアされていないことです。

Firefoxは、最初の列の上の列（私の場合はボタン）の後に次の要素をフロートさせます。私のローカルファイルはInternetExplorerで完全にレンダリングされます（ただし、IEがクリアのために独自の囲みを追加しているためだと思います...それを読んだ場所が見つかりません）。ただし、IEでjsFiddleコードを見ると、textareasは100％の高さを維持していません。jsFiddleはIEのQuirksモードでHTMLをレンダリングしないと想定しています（これが私のローカルファイルとは異なる理由です）。

Holy Grailの記事、w3schoolsの記事、clear ：after fixの記事、およびその他のいくつかの記事（div列のレイアウト）を見てきましたが、両方のブラウザーで機能するソリューションを思い付くことができませんでした。

これが私のjsFiddleコードで、これが私のコードです。ご覧のとおり、私のコードには複数のメソッドがあるので、ごちゃごちゃしてすみません。

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">&nbsp;</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)。これで問題は解決しますが、テキストエリア全体を表示したいのですが、非表示にしたりスクロールさせたりしないでください。任意の提案やアイデアをいただければ幸いです。

4

1 に答える 1

2

取った：

height: 40%;

CSSの#top減速から。それが問題の原因です。テキストボックスを大きくしたい場合は、以下を使用してください。

textarea{height:200px;}

お役に立てれば。

于 2012-04-12T00:50:21.753 に答える