0

2 つの div/列があります。1 つは左にフロートし、もう 1 つは右にフロートしました (私が作成しているレスポンシブ デザイン ページでは、このようにする必要があります)。左の div のコンテンツは、ビューポート/左の div よりはるかに下まで伸びていますが、右のコンテンツは短く、ビューポート/右の div 内に収まっています。

左のdivのコンテンツ（または右のdivのコンテンツが長い場合は右のdivのコンテンツ）の一番下まで拡大するには、背景色が必要です。

代わりに、ビューポートの下部にある背景色/div を切り取っています。clears:both、clearfix、overflow コントロールを試してみましたが、役に立ちませんでした。このセットアップでは、それらを正しく実装していないと思います。誰かが私のフィドルを編集して、それらを一番下まで拡張するために何をする必要があるかを教えてもらえますか?

ここにフィドルがあります（小さなビューポートを下にスクロールして、色がどのようにカットされるかを確認する必要があります）：

http://jsfiddle.net/4C89C/

フィドルで使用しているコードは次のとおりです。

<html><head></head><body><style>

html, body {height:100%;}
#content {
    height:100%;
    border:thin solid red;
}
#innerdiv {
    height:100%;
    float:left;
    background-color: #eee;
    width: 60%;
}
#innerdiv2 {
    height:100%;
    float:right;
    background-color: blue;
    width: 40%;
}
#textdiv {
    height: 100%;
    padding-left: 40px;
}
#textdiv2 {
    height: 100%;
    padding-left: 40px;
    colo: white;
}  
</style>




<div id="content">
    <div id="innerdiv">
        <div id="textdiv">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />

                </div>
    </div>

<div id="innerdiv2">
        <div id="textdiv2">

Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />
            </div>
      </div>    
</div>

</body></html>
4

1 に答える 1

2

#content { height:100%; }この高さは親要素の高さを参照しており、#contentコンテンツによって「生成された」高さを参照していないため、機能しません...つまり#content、そのままの高さしか取得され<body>ず、ページ全体の高さではなく、高さです「表示エリア」です。

と で別のものを挿入#contentした後に との高さを定義しないでください。#innerdiv2<div>height:0;clear:both;

トリックを行う必要があり、そのことについてあなたや誰かを邪魔しないでください:)

于 2013-12-06T01:00:28.303 に答える