0

一番下の部分までスクロールしても（100pxだけでなく）、div2の高さをdiv1の100％にしたい。これはCSSのみで可能ですか？

http://jsfiddle.net/jPMjF/2/

<div id="div1">
     <div id="div2">
     </div>
     <p>Bunch of text here</p>
</div>

#div1 {
   background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width: 200px;
}

#div1 p {
    display: inline-block;
    width: 50px;
    height: 200px;
}

#div2 {
    display: inline-block;
    background-color: #ccc;
    vertical-align: top;
    width: 100px;
    height: 100%
}
4

5 に答える 5

1

div2 が 300px 未満の場合、div1 のスクロール可能な高さが 300px を超えるのはなぜですか? あなたが投稿したものから、必要なのは次のことだけだと思います：

#div1 {
   height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
}

#div2 {
    background-color: #ccc;
    min-height: 100%;
}

これは、高さが 300px 未満の場合、div2 がコンテナー全体を埋めることを意味しますが、コンテナーがスクロールバーでオーバーフローした場合でも拡張できます。

編集

さて、これは不適切なようです。この時点で、私はいくつかの状況に応じたオプションに傾いています。

  1. div2 または p (これを div3 内に配置するとします) の 1 つだけが高さ 300px を超えることがわかっている場合は、div1 の背景を反対側の div と一致するように設定できます。これは、小さい div の下の空白は同じ背景を持つことを意味し、ユーザーには同じように見えます。
  2. div2 と div3 の両方が固定幅である場合は、両方の背景をクリアして、コンテナ div に背景画像を配置するだけです。(これは明らかに、垂直方向に繰り返される 1 ピクセルのストリップで、中央のどこかで色が分割されます。)
  3. 古いブラウザーに対応していない場合は、CSS3 フレキシブル ボックス モデルを使用できます。これは、コンテナー内のすべてのスペースを埋めるように拡張することを意図していると理解しています。
  4. display: tableこのプロパティを、テーブル スタイルのやや「ハックな」方法として使用できます。css テーブルは固定高さを許可していないようです。スクロールバーなしですべてのコンテンツを表示するためにオーバーフローするため、適切なオーバーフロー値を持つ固定幅のインライン ブロックに設定された外側のコンテナー内に配置する必要があります。
于 2012-05-07T07:19:13.957 に答える
0

私はあなたがこれを意味していると思います: http://jsfiddle.net/jPMjF/

   #div1 {
       height: 300px
       overflow: auto;
       overflow-x: hidden;
    }

    #div2 {
        background-color: #ccc;
        min-height: 300px;
    }

このように、コンテンツが div1 の高さを超えていても、div2 は div1 内でスクロールします (フィドルでは、div2 に 600px の高さを与えました)。

于 2012-05-07T07:19:54.923 に答える
0 
#div1 {
    background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width:200px;
}

#div1 p { display: inline-block; width: 50px; }

#div2 {
    display: table-cell;
    background-color: #ccc;
    height: auto;
    width: 100px;
    padding-bottom:80%;
    float:left;
}

あなたの答えは、これが100％機能することを確認してください

于 2013-10-16T12:20:00.920 に答える
0

私はわずかな変更を加えました..あなたがこれを理解することを願っています..

html

<div id="div1">
     <div id="div2">
         Content in div2.
     </div>
    <p id="p3">
        ajs hask jas ashja sjh jasj ashja sbasj hasbk asj ask ashja sba sjh ashj asb sajask ajhb sakjbs ashjb saasj
    </p>
</div>

Jクエリ

$(document).ready(function(){
  var div3height=$('#div3').height();
    $('#div2').height(div3height);
});

CSS

    #div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
    }

    #div2 {
        background-color: #ccc;
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}

これがあなたを助けることを願っています..

編集

質問がIpdによって述べられたとおりに意図されていた場合

次に、CSSを変更してjquery部分を残すだけです...

つまり..

CSS

#div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
       background-color: #ccc;
    }

    #div2 {
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
         background-color:#FFF;
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}
于 2012-05-07T09:19:52.007 に答える