Buat div (tinggi) menempati tinggi sisa induk

http://jsfiddle.net/S8g4E/

Saya memiliki wadah divdengan dua anak. Anak pertama memiliki tinggi tertentu. Bagaimana cara membuat anak kedua menempati "ruang kosong" wadah divtanpa memberikan ketinggian tertentu?

Sebagai contoh, warna merah muda divjuga harus menempati ruang putih.

Mirip dengan pertanyaan ini: Bagaimana membuat div menempati ketinggian yang tersisa?

Tapi saya tidak mau memberikan posisi absolut .

Memperluas #downanak untuk mengisi ruang yang tersisa #containerdapat dilakukan dengan berbagai cara tergantung pada dukungan browser yang ingin Anda capai dan apakah #upmemiliki ketinggian yang ditentukan atau tidak .

Sampel

.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>

Kotak

gridTata letak CSS menawarkan opsi lain, meskipun mungkin tidak sesederhana model Flexbox. Namun, ini hanya membutuhkan gaya elemen penampung:

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

The grid-template-rowsmendefinisikan baris pertama sebagai 100px tinggi tetap, dan tetap baris otomatis akan meregang untuk mengisi ruang yang tersisa.

Saya cukup yakin IE11 membutuhkan -ms-prefiks, jadi pastikan untuk memvalidasi fungsionalitas di browser yang ingin Anda dukung.

Flexbox

Modul Tata Letak Kotak Fleksibelflexbox CSS3 ( ) sekarang didukung dengan baik dan dapat sangat mudah diterapkan. Karena fleksibel, ia bahkan berfungsi ketika #uptidak memiliki ketinggian yang ditentukan.

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

Penting untuk dicatat bahwa dukungan IE10 & IE11 untuk beberapa properti flexbox dapat bermasalah, dan IE9 atau yang lebih rendah tidak memiliki dukungan sama sekali.

Tinggi Terhitung

Solusi lain yang mudah adalah dengan menggunakan unit fungsional CSS3calc , seperti yang ditunjukkan Alvaro dalam jawabannya , tetapi membutuhkan tinggi dari anak pertama untuk menjadi nilai yang diketahui:

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

Ini cukup banyak didukung, dengan satu-satunya pengecualian penting adalah <= IE8 atau Safari 5 (tidak ada dukungan) dan IE9 (dukungan parsial). Beberapa masalah lain termasuk menggunakan calc dalam hubungannya dengan transform atau box-shadow , jadi pastikan untuk menguji di beberapa browser jika itu menjadi perhatian Anda.

Alternatif Lain

Jika dukungan yang lebih lama diperlukan, Anda dapat menambahkan height:100%;ke #downakan membuat div merah muda setinggi penuh, dengan satu peringatan. Ini akan menyebabkan penampung meluap, karena #upmendorongnya ke bawah.

Oleh karena itu, Anda dapat menambahkan overflow: hidden;ke wadah untuk memperbaikinya.

Sebagai alternatif, jika ketinggiannya #uptetap, Anda dapat memposisikannya secara mutlak di dalam wadah, dan menambahkan bantalan ke atas #down.

Dan, opsi lain adalah menggunakan tampilan tabel:

#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;}​

Sudah hampir dua tahun sejak saya menanyakan pertanyaan ini. Saya baru saja menemukan css calc () yang menyelesaikan masalah yang saya alami ini dan berpikir akan lebih baik untuk menambahkannya jika seseorang memiliki masalah yang sama. (Ngomong-ngomong saya akhirnya menggunakan posisi absolut).

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

Ini cssnya

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

Dan informasi lebih lanjut tentang itu di sini: http://css-tricks.com/a-couple-of-use-cases-for-calc/

Dukungan browser: http://caniuse.com/#feat=calc

Jawaban saya hanya menggunakan CSS, dan tidak menggunakan overflow: hidden atau display: table-row. Ini mensyaratkan bahwa anak pertama benar-benar memiliki tinggi tertentu, tetapi dalam pertanyaan Anda, Anda menyatakan bahwa hanya kebutuhan anak kedua yang tingginya tidak ditentukan, jadi saya yakin Anda harus menganggap ini dapat diterima.

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/

periksa demo - http://jsfiddle.net/S8g4E/6/

gunakan css -

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

Kecuali saya salah paham, Anda bisa menambahkan height: 100%;dan overflow:hidden;ke #down.

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

DEMO langsung

Edit: Karena Anda tidak ingin menggunakan overflow:hidden;, Anda dapat menggunakan display: table;skenario ini; namun, ini tidak didukung sebelum IE 8. ( display: table;dukungan )

#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;
}​

DEMO langsung

Catatan: Anda telah mengatakan bahwa Anda ingin #downtingginya menjadi #containertinggi dikurangi #uptinggi. The display:table;solusi tidak tepat dan jsfiddle ini akan memerankan yang cukup jelas.

Anda dapat menggunakan pelampung untuk mendorong konten ke bawah:

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

Anda memiliki wadah ukuran tetap:

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

Konten dibiarkan mengalir di samping pelampung. Kecuali kita menyetel float ke lebar penuh:

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

Sementara #updan #downberbagi posisi teratas, #downkonten hanya dapat dimulai setelah bagian bawah mengambang #up:

#down {
    height:100%;
}​

Abstrak

Saya tidak menemukan jawaban yang memuaskan jadi saya harus mencari tahu sendiri.

Persyaratan saya:

• elemen harus mengambil persis ruang yang tersisa baik ketika yang ukuran konten adalah lebih kecil atau lebih besar dari ukuran ruang yang tersisa (dalam kasus kedua scrollbar harus ditampilkan );
• solusinya harus bekerja saat tinggi induk dihitung , dan tidak ditentukan ;
• calc()tidak boleh digunakan karena elemen lainnya tidak boleh tahu apa - apa tentang ukuran elemen lain;
• teknik tata letak modern dan familar seperti flexboxes harus digunakan.

Solusinya

• Ubah menjadi flexboxes semua orang tua langsung dengan tinggi dihitung (jika ada) dan orang tua berikutnya yang tingginya ditentukan ;
• Tentukan flex-grow: 1untuk semua orang tua langsung dengan tinggi yang dihitung (jika ada) dan elemen sehingga mereka akan menggunakan semua ruang yang tersisa saat ukuran konten elemen lebih kecil;
• Tentukan flex-shrink: 0untuk semua item fleksibel dengan tinggi tetap sehingga tidak akan menjadi lebih kecil saat ukuran konten elemen lebih besar dari ukuran ruang yang tersisa;
• Tentukan overflow: hiddenuntuk semua orang tua langsung dengan tinggi yang dihitung (jika ada) untuk menonaktifkan pengguliran dan melarang menampilkan konten melimpah;
• Tentukan overflow: autountuk elemen untuk mengaktifkan bergulir di dalamnya.

JSFiddle (elemen memiliki induk langsung dengan tinggi yang dihitung)

JSFiddle (kasus sederhana: tidak ada orang tua langsung dengan tinggi yang dihitung)

Saya tidak yakin itu bisa dilakukan murni dengan CSS, kecuali Anda merasa nyaman memalsukannya dengan ilusi. Mungkin menggunakan jawaban Josh Mein ini, dan set #containerke overflow:hidden.

Untuk apa nilainya, inilah solusi jQuery:

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