Buat div (tinggi) menempati tinggi sisa induk

107

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 .

Alvaro
sumber
Saya mencoba juga memberikan tinggi anak kedua 100% tetapi tidak berhasil: jsfiddle.net/S8g4E/1
Alvaro

Jawaban:

156

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

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;}​
pengguna
sumber
4
Saya ingin #down memiliki #tinggi wadah - #tinggi wadah. Jadi, overflow hidden bukanlah yang saya cari. Dan juga tidak ingin menggunakan posisi absolut. Terima kasih!
Alvaro
@Alvaro, saya telah menambahkan opsi lain, menggunakan tampilan tabel. Kerugian di sini adalah kompatibilitas. PS Sebuah elemen diposisikan secara mutlak di dalam sebuah wadah dengan position: relative;posisinya relatif terhadap wadah, bukan jendela. Jadi, itu harus menjadi opsi yang layak.
pengguna
2
Tabel-baris harus bekerja untuk Anda, lihat jsFiddle ini untuk bukti. Metode absolut posisi, tidak akan dapat memberikan hasil yang sama seperti biola ini, jadi kita dapat menggoresnya dari daftar (#down dan #container akan memiliki ketinggian yang sama dalam skenario itu).
pengguna
3
Anda banyak bertanya, @Alvaro. CSS bukanlah bahasa scripting; itu tidak bisa menghitung barang. Anda terjebak dengan ilusi atau js.
Jezen Thomas
1
@Quantastical, terima kasih atas bantuan Anda, tetapi dalam suntingan terakhir Anda, Anda baru saja menyalin jawaban yang saya posting. Beberapa menyebutkan tentang itu setidaknya akan menyenangkan.
Alvaro
24

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

Alvaro
sumber
1
Saya juga telah menggunakan CSS3 di calcmana dukungan browser lebar tidak begitu penting (IE8 ke bawah dan Safari 5 tidak mendukungnya).
pengguna
3
Adakah cara untuk melakukan yang serupa dengan #upketinggian dinamis ?
Adam Waite
@AdamWaite, dengan ketinggian #up dinamis, Anda akan ingin menggunakan solusi luapan yang dijelaskan dalam jawaban lain.
pengguna
5

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/

TWR Cole
sumber
2

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;}
Dipak
sumber
Anda harus menambahkan height: 1pxke #upuntuk memastikan ketinggian minimum yang dibutuhkan. Berikut dukungan browser untuk display: table: caniuse.com/css-table
thirtydot
Bisakah Anda menunjukkan kepada saya bagaimana solusi ini dapat dicapai dalam contoh yang "lebih kompleks" ini, harap: jsfiddle.net/fyNX4 Terima kasih banyak
Alvaro
2

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.

Josh Mein
sumber
1
Saya tidak ingin #down melebihi #ketinggian kontainer
Alvaro
Saya baru saja menyadarinya. Anda dapat menambahkan overflow:hiddenke untuk menyembunyikan konten ekstra.
Josh Mein
1
Saya akan menyalin / menempel apa yang saya katakan kepada MrSlayer: Saya ingin #down memiliki #ketinggian kontainer - #tinggi. Jadi, overflow hidden bukanlah yang saya cari. Dan juga tidak ingin menggunakan posisi absolut. Terima kasih!
Alvaro
Masalahnya adalah jika Anda mengembalikan dua div dalam contoh Anda, maka div hijau berada di luar.
Menyerahkan
Ini sama sekali tidak menjawab pertanyaan itu. Ini menyatakan "Untuk menempati semua ketinggian yang tersisa", meskipun ini menempati semua ketinggian yang tersisa, akan ada luapan.
Giridhar Karnik
1

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%;
}​
biziclop
sumber
Perhatikan bahwa #upsebenarnya mencakup bagian atas #down: jsfiddle.net/thirtydot/S8g4E/9
tiga puluhdot
Ya, begitulah cara kerjanya. Tetapi jika OP tidak membutuhkan perbatasan bulat atau sesuatu yang mewah #up, maka itu mungkin bisa diterima.
biziclop
Solusi ini sudah dekat, tetapi saya ingin #down memiliki #tinggi kontainer - #tinggi kontainer. (Dalam solusi Anda #down height = #container height). Terima kasih '
Alvaro
1
@Alvaro: Mengapa harus seperti itu? Solusi ini terlihat benar dalam banyak kasus, meskipun itu hanya ilusi.
tigapuluhdot
Nah, pertanyaan ini adalah contoh sederhana dari contoh yang lebih "kompleks" ini: jsfiddle.net/fyNX4 Tidak akan berhasil, bukan?
Alvaro
1

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)

N. Kudryavtsev
sumber
-3

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);
Jezen Thomas
sumber
Terima kasih saya sedang mencari solusi Css murni.
Alvaro