子divの高さをストレッチして、動的な高さを持つ親を塗りつぶします

94

次のフィドルでわかるように、大きなdivを含むように引き伸ばさdivれた親に含まれる2つのdivがあり、私の目標はそれらの子divの高さを等しくすることです。

http://fiddle.jshell.net/y9bM4/

css html

— ハレド
ソース

2

これらの質問を確認してください。stackoverflow.com/questions/3049783/...、stackoverflow.com/questions/1575141/...、stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko CSSにはたくさんありますが、CSS3にはたくさんありません。私はそう思う。

— Mr_Green

1

@Mr_Green「CSS」とCSS3の間の基本的なレベルの違いは取るに足らないものなので、問題は発生しません。これは非常に一般的な問題であり、死について尋ねられ、回答されています。

— Mike H.

1

@MikeHometchko私の解決策をチェックしてください。これまで誰も同じ答えをしたことはないでしょう。

— Mr_Green 2013年

48

解決策は、またはdisplay: table-cellを使用する代わりに、を使用してこれらの要素をインラインにすることです。display: inline-blockfloat: left

div#container {
  padding: 20px;
  background: #F1F1F1
}
.content {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: table-cell;
  vertical-align: top;
}
.text {
  font-family: 12px Tahoma, Geneva, sans-serif;
  color: #555;
}

<div id="container">
  <div class="content">
    <h1>Title 1</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.
      <br>Sample Text. Sample Text. Sample Text.
      <br>Sample Text.
      <br>
    </div>
  </div>
  <div class="content">
    <h1>Title 2</h1>

    <div class="text">Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text. Sample Text.</div>
  </div>
</div>

スニペットを展開

フィドル

— グリーンさん
ソース

ただし、親要素がテーブルセルの場合は機能しません。

— トマーシュZato -復活モニカ

53

display: flexあなたdivのs を伸ばすために使用してください：

div#container {
    padding:20px;
    background:#F1F1F1;
    display: flex;
}

.content {
    width:150px;
    background:#ddd;
    padding:10px;
    margin-left: 10px;
}

JSFIDDLE

— トロンラムファン
ソース

18

次のCSSを追加します。

親divの場合：

style="display: flex;"

子divの場合：

style="align-items: stretch;"

— アヤン
ソース

stretchフレックスが私のために働くために私は子供たちを追加する必要がありました。

— BadHorsie

4

https://www.youtube.com/watch?v=jV8B24rSN5o

グリッドとして表示を使用できると思います：

.parent { display: grid };

— ゲロK
ソース

元の投稿者の同じコードを使用して回答をテストしましたか？

— マークスチュワート

それは動作し、子にCSSを必要としません。これは、CSSグリッドセルにはautoデフォルトで行とセルがあるためです。display: -ms-grid子が1つしかない限り、一部のフレックスバグを回避するために使用する場合、IEで実際にうまく動作します。

— ShortFuse

-6

あなたは少しのjQueryで簡単にそれを行うことができます

$(document).ready(function(){
  var parentHeight = $("#parentDiv").parent().height();
  $("#childDiv").height(parentHeight);
});

— レボン・マテボシアン
ソース

3

ブラウザウィンドウのサイズが変更されるとこれは機能しなくなりますが、CSSは引き続き機能します。

— SharpC 2016年