Div (yükseklik) 'i kalan ebeveyn yüksekliğini işgal et

http://jsfiddle.net/S8g4E/

divİki çocuklu bir konteynerim var . İlk çocuğun belirli bir boyu vardır. İkinci çocuğu divbelirli bir yükseklik vermeden konteynerin "boş alanını" işgal etmesi için nasıl sağlayabilirim ?

Örnekte pembe div, beyaz boşluğu da kaplamalıdır.

Bu soruya benzer: div'in kalan yüksekliği kaplaması nasıl sağlanır?

Ama mutlak pozisyon vermek istemiyorum .

#downÇocuğu kalan alanı dolduracak şekilde genişletmek, #containerelde etmek istediğiniz tarayıcı desteğine ve #uptanımlı bir yüksekliğe sahip olup olmadığına bağlı olarak çeşitli şekillerde gerçekleştirilebilir .

Örnekler

.container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

<div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

Kafes

CSS'nin griddüzeni, Flexbox modeli kadar basit olmasa da, başka bir seçenek daha sunar. Ancak, yalnızca kapsayıcı öğesinin stilini gerektirir:

.container { display: grid; grid-template-rows: 100px }

grid-template-rowsSabit bir 100 piksel yüksekliği olarak ilk satırı tanımlar ve sıralar otomatik olarak geri kalan boşluğun doldurulması için streç kalır.

IE11'in -ms-önekler gerektirdiğinden oldukça eminim , bu yüzden desteklemek istediğiniz tarayıcılardaki işlevselliği doğruladığınızdan emin olun.

Flexbox

CSS3'ün Esnek Kutu Yerleşimi Modülü ( flexbox) artık iyi desteklenmektedir ve uygulanması çok kolay olabilir. Esnek olduğu için, #upbelirli bir yüksekliğe sahip olmadığında bile çalışır .

#container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

Bazı flexbox özellikleri için IE10 & IE11 desteğinin hatalı olabileceğini ve IE9 veya altının hiç destek olmadığını unutmamak önemlidir.

Hesaplanan Yükseklik

Alvaro'nun cevabında belirttiği gibi bir başka kolay çözüm de CSS3calc işlevsel birimini kullanmaktır , ancak bu, ilk çocuğun boyunun bilinen bir değer olmasını gerektirir:

#up { height: 100px; }
#down { height: calc( 100% - 100px ); }

Tek önemli istisnalar <= IE8 veya Safari 5 (destek yok) ve IE9 (kısmi destek) olmakla birlikte oldukça yaygın bir şekilde desteklenmektedir. Diğer bazı sorunlar arasında dönüşüm veya kutu gölgesi ile birlikte calc kullanımı yer alır , bu nedenle sizi ilgilendiriyorsa birden çok tarayıcıda test ettiğinizden emin olun.

Diğer Alternatifler

Eski destek gerekiyorsa, eklemek olabilir height:100%;için #downbir uyarı ile, pembe div tam yüksekliğini yapacaktır. Kap için taşmaya neden olur, çünkü #uponu aşağı iter.

Bu nedenle, bunu overflow: hidden;düzeltmek için konteynere ekleyebilirsiniz .

Alternatif olarak, yüksekliği #upsabitse, kesinlikle kabın içinde konumlandırabilir ve bir dolgu tepesi ekleyebilirsiniz #down.

Ve yine bir başka seçenek, bir tablo ekranı kullanmak olacaktır:

#container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

Bu soruyu soralı neredeyse iki yıl oldu. Sahip olduğum bu sorunu çözen css calc () ile geldim ve birinin aynı sorunu yaşaması durumunda onu eklemenin güzel olacağını düşündüm. (Bu arada, mutlak konumu kullanmaya başladım).

http://jsfiddle.net/S8g4E/955/

İşte css

#up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

Ve bununla ilgili daha fazla bilgiyi burada bulabilirsiniz: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Tarayıcı desteği: http://caniuse.com/#feat=calc

Cevabım yalnızca CSS kullanıyor ve overflow: hidden veya display: table-row kullanmıyor. İlk çocuğun gerçekten belirli bir boyda olmasını gerektirir, ancak sorunuzda sadece ikinci çocuğun boyunun belirtilmemesi gerektiğini belirtiyorsunuz, bu yüzden bunu kabul edilebilir bulmanız gerektiğine inanıyorum.

html

<div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

css

#container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; height: 63px; float:left; width: 100% }
#down { background:pink; padding-top: 63px; height: 100%; box-sizing: border-box; }

http://jsfiddle.net/S8g4E/288/

Öz

Tamamen tatmin edici bir cevap bulamadım, bu yüzden kendim bulmak zorunda kaldım.

Gereksinimlerim:

• eleman almalıdır tam olarak kalan alanı da zaman ya da içerik boyutu olan daha küçük ya da daha büyük daha kalan boşluk boyutu (ikinci durumda kaydırma çubuğu olmalıdır gösterilir );
• çözüm, ebeveyn yüksekliği hesaplandığında ve belirtilmediğinde çalışmalıdır ;
• calc()kalan eleman başka eleman boyutları hakkında hiçbir şey bilmemesi gerektiğinden kullanılmamalıdır ;
• flexbox'lar gibi modern ve benzer yerleşim tekniği kullanılmalıdır.

Çözüm

• Hesaplanan yüksekliği (varsa) ve yüksekliği belirtilen sonraki ebeveyne sahip tüm doğrudan üst öğeleri flexbox'lara dönüştürün ;
• Belirtin flex-grow: 1için hesaplanan yükseklik (varsa) ile tüm doğrudan ebeveynler ve eleman eleman içerik boyutu küçük olduğunda hepsi kalan yer kaplar böylece;
• Sabit yüksekliğe sahip tüm esnek öğeleri belirtin flex-shrink: 0, böylece öğe içeriği boyutu kalan alan boyutundan daha büyük olduğunda küçülmezler;
• Belirtin overflow: hiddeniçin hesaplanan yüksekliği ile tüm doğrudan ebeveynler (varsa) devre dışı kaydırma ve taşma içerik gösteriyor korusun;
• Belirtin overflow: autoiçin eleman içine kaydırma etkinleştirmek için.

JSFiddle (öğenin yüksekliği hesaplanmış doğrudan üst öğeleri vardır)

JSFiddle (basit durum: hesaplanmış yüksekliğe sahip doğrudan üst öğe yok)

demoyu kontrol edin - http://jsfiddle.net/S8g4E/6/

css kullan -

#container { width: 300px; height: 300px; border:1px solid red; display: table;}
#up { background: green; display: table-row; }
#down { background:pink; display: table-row;}

Ben yanlış anlama ediyorum sürece, sadece ekleyebilir height: 100%;ve overflow:hidden;için #down.

#down { 
    background:pink; 
    height:100%; 
    overflow:hidden;
}​

Canlı DEMO

Düzenle: Kullanmak istemediğinizden bu senaryo için overflow:hidden;kullanabilirsiniz display: table;; ancak IE 8'den önce desteklenmez. ( display: table;destek )

#container { 
    width: 300px; 
    height: 300px; 
    border:1px solid red;
    display:table;
}

#up { 
    background: green;
    display:table-row;
    height:0; 
}

#down { 
    background:pink;
    display:table-row;
}​

Canlı DEMO

Not: #downYüksekliğin #containeryükseklik eksi #upyükseklik olmasını istediğinizi söylediniz . display:table;Çözelti aynen yapar ve bu jsfiddle oldukça açıkça canlandırıyor.

İçeriği aşağı itmek için kayan sayıları kullanabilirsiniz:

http://jsfiddle.net/S8g4E/5/

Sabit boyutlu bir kabınız var:

#container {
    width: 300px; height: 300px;
}

İçeriğin bir şamandıranın yanında akmasına izin verilir. Şamandırayı tam genişliğe ayarlamazsak:

#up {
    float: left;
    width: 100%;
}

İken #upve #downüst konumunu paylaşan, #down'nin içeriği sadece süzülüyor dibine sonra başlayabilir #up:

#down {
    height:100%;
}​

Yanılsamalarla taklit etme konusunda rahat değilseniz, tamamen CSS ile yapılabileceğinden emin değilim. Belki Josh Mein yanıtını ve kümesi kullanmak #containeriçin overflow:hidden.

Değeri ne olursa olsun, işte bir jQuery çözümü:

var contH = $('#container').height(),
upH = $('#up').height();
$('#down').css('height' , contH - upH);