0

3 つの列で構成されたサイトがあり、各列は外部ラッパー (ページ) の 100% の高さでなければなりません。

html、body、およびすべての列を次のように設定しました。

height: 100%;

ただし、3 列目のコンテンツがクリッピングされており、その理由がわかりません。SOで同様の質問を見てきましたが、問題を解決するものはないようです。

ここにjsfiddleの例を設定しました：http://jsfiddle.net/rTXt6/

それは簡単な解決策だと確信していますが、それは私を怒らせるので、誰かが助けてくれることを願っています.

編集:少し明確にするために、height: 100% は高さをブラウザー ウィンドウの高さの 100% に設定しているように見えます。

4

3 に答える 3

0

純粋な HTML/CSS の修正を見つけ、jsfiddle を更新してここに表示しました

基本的に、前の div の各 div を最後の (rightcol) までネストし、各子 div のパーセンテージ幅を低くしました。

<div>LeftCol
    <div>CenterCol
         <div>RightCol
         </div>
    </div>
</div>

いつものようにみんなの意見をありがとう:)

于 2013-03-08T11:41:58.227 に答える
0

css フロートでは、このような clearfix を使用する必要があります。

私はちょうどあなたのコードに追加しました:

HTML

<div class="cf"></div>

CSS

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

以下のリンクからクリアフィックス。

更新されたフィドルを参照してください

于 2013-03-08T10:26:18.900 に答える
0

少し時間を費やした後、解決策を見つけたようです。divのすべての内部コンテナーのmin-height:100%代わりに設定します。更新されたフィドルheight:100%#container

于 2013-03-08T11:07:16.170 に答える