親divを満たすためにdivの高さを伸ばす方法-CSS

107

以下のようなdivのページがあります

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

としてスタイリング;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

私はdiv要素の高さを調整したいB2塗りつぶし（またはストレッチに）に全体のdiv BここD.が働いフィドルあるDIV（緑の枠線でマーク）とクロスフッターにしたくないデモ（更新します）。どうすればこれを解決できますか？

css

— アルフレッド
ソース

38

スタイリングに追加height: 100%;するだけ#B2です。min-height必要はありません。

— スノーバックル
ソース

4

それは、difが空の場合です。

— x10

39

悪い回答＃B2は#Bのように背が高くなく尋ねたとして、残りのスペースを埋めるために伸ばすようになります

— 巣

3

これは、float親と異なるdivには機能しませんか？

— Don Cheadle、2015年

B1をカバーし、すべてのスペースを取ります; /

— mikus

1

これは明らかに機能しません。高さ：100％はコンテナの100％です（ほとんどの場合、ビューポート全体と思います）-その高さは必要以上に高くなります。

— BT

25

あなたが持っていると仮定します

<body>
  <div id="root" />
</body>

通常のCSSでは、次のことができます。動作しているアプリを見るhttps://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

フレックスボックスを使用すると、次のことができます

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
ソース

10

http://jsfiddle.net/QWDxr/1/

「min-height」プロパティを使用する
パディング、マージン、ボーダーに注意してください:)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
ソース

1

いいえ。ページ全体を上部マージンで埋めます。特定のdivを埋めたいだけですB

— アルフレッド

chromeとfirefoxで正しく動作します。これでうまくいかない場合は、Faux Columns

— x10

機能しますが、フッターはカットされdiv id= Dます。div dを越えたくない

— アルフレッド

2

height:100%#B2スタイルのセミコロンがありません。

— エミル

5

私の目的に合ったのは、常に一定の量でブラウザーウィンドウ全体に囲まれるdivを作成することでした。

少なくともFirefoxで機能したのはこれでした

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

実際のウィンドウが強制的にスクロールされない限り、divはすべてのサイズ変更時にウィンドウの端までの境界を保持します。

これが誰かの時間を節約することを願っています。

— レオ・スミス
ソース

5

スタイリングの目的でB2を使用する場合は、この「ハック」を試すことができます

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— テネフ
ソース

1

これでうまくいきます。ちなみに、それはする必要がありますmargin-bottom: -9999px;。あなたはマイナスを逃しています。

— ガウイ

1

B2コンテナの相対位置

残りの高さの上部位置B2 +

B2の高さ+高さB1または残りの高さ

— ドミトロ・ユルチェンコ
ソース

親ノードを相対位置に設定すると、無関係な問題が解決しました！ありがとう！

— Deejers

0

使用しますheight: stretch;。ここでは、使用方法に関する詳細を確認できます。

— イホル
ソース

-4

サイズが異なる場合は、JavaScriptソリューション（jQUery）で解決します。

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
ソース

8

あなたはそれをあなたの質問に追加したいと思うかもしれません:)

— NKCSS

48

javascriptまたはjqueryタグがない場合は十分ではありませんか？

— kapa

1

これもまったく不要です。CSSはここ数年で大きな進歩を遂げました。フレックスボックスとcalc（）をチェックアウトします。

— Shawn Whinnery 2015

1

フレックスボックスは、<IE10 :(

— Constant Meiring

@ConstantMeiring本当の問題は、誰もが<IE10を気にしているかどうかです。;）

— Clonkex、