Dinamik yüksekliğe sahip ebeveyni doldurmak için alt div yüksekliğini uzat

96

Aşağıdaki keman da görülebileceği gibi, büyük div'i içerecek şekilde uzatılmış divbir ebeveynde bulunan iki s divvar, amacım bu çocuğun divboy olarak eşit olmasını sağlamak .

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

css html

— Halit
kaynak

2

şu soruları kontrol edin: stackoverflow.com/questions/3049783/… , stackoverflow.com/questions/1575141/… , stackoverflow.com/questions/13609531/make-an-div-100-height-css

— mrzmyr

@MikeHometchko CSS'de çok sayıda var ama CSS3'te değil. Ben öyle düşünüyorum.

— Mr_Green

1

@Mr_Green "CSS" ve CSS3 arasındaki temel seviyedeki farklar önemsiz, bu yüzden sorunu görmüyorum. Bu, ölümüne sorulan ve yanıtlanan çok yaygın bir sorundur.

— Mike H.

1

@MikeHometchko çözümümü kontrol et. Eminim daha önce kimse aynı şeyi cevaplamamıştır.

— Mr_Green

48

Solüsyon kullanmaktır display: table-cellbu öğeleri getirmek satır içi yerine kullanarak display: inline-blockveya float: 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>

Snippet'i genişlet

Çalışma Keman

— Bay Yeşil
kaynak

Üst öğe tablo hücresiyse bu işe yaramaz.

— Tomáš Zato - Monica'yı

57

display: flexEsnemek için kullanın div:

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

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

JSFIDDLE

— Trong Lam Phan
kaynak

19

Aşağıdaki CSS'yi ekleyin:

Üst div için:

style="display: flex;"

Çocuk div için:

style="align-items: stretch;"

— Ayan
kaynak

stretchFlex'in benim için çalışması için çocukları da eklemem gerekiyordu .

— BadHorsie

4

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

Ekranı ızgara olarak kullanabileceğinizi düşünüyorum:

.parent { display: grid };

— Gelo K
kaynak

Cevabınızı orijinal göndericinin aynı kodunu kullanarak test ettiniz mi?

— Mark Stewart

Çalışır ve çocukta herhangi bir CSS gerektirmez. Bunun nedeni, bir CSS Izgara hücresinin autovarsayılan olarak satır ve hücreye sahip olmasıdır . Sadece display: -ms-gridbir çocuğunuz olduğu sürece, bazı flexbug'lardan kaçınmak için kullanırsanız , aslında IE ile oldukça iyi çalışır .

— ShortFuse

-6

Bunu biraz jQuery ile kolayca yapabilirsiniz

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

— Levon Matevosyan
kaynak

3

Tarayıcı penceresi yeniden boyutlandırıldıktan sonra bu kırılır, CSS pencereleri ise çalışmaya devam eder.

— SharpC