Cara meregangkan tinggi div untuk mengisi div induk

107

Saya memiliki halaman dengan div seperti di bawah ini

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

dengan gaya sebagai;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

Saya ingin menyesuaikan ketinggian div B2untuk mengisi (atau meregangkan ke) seluruh div B(ditandai dengan batas hijau) dan tidak ingin menyilangkan footer div D. Berikut adalah demo biola yang berfungsi (diperbarui). Bagaimana saya bisa memecahkan masalah ini??

css

— Alfred
sumber

38

Cukup tambahkan height: 100%;ke #B2gaya. min-heightseharusnya tidak perlu.

— Snorbuckle
sumber

4

Itu akan terjadi, jika DIF kosong.

— x10

39

jawaban buruk # B2 akan setinggi #B tetapi tidak meregang untuk mengisi ruang yang tersisa seperti yang diminta

— bersarang

3

apakah ini tidak bekerja untuk div dengan floatinduk yang berbeda dari itu?

— Don Cheadle

itu mencakup B1 dan mengambil semua ruang; /

— mikus

1

Ini jelas tidak berfungsi, tinggi: 100% adalah 100% dari wadah (saya pikir paling sering seluruh viewport) - tingginya akan lebih dari yang diinginkan.

— BT

25

Misalkan Anda punya

<body>
  <div id="root" />
</body>

Dengan CSS normal, Anda dapat melakukan hal berikut. Lihat aplikasi yang berfungsi https://github.com/onmyway133/Lyrics/blob/master/index.html

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Dengan flexbox, Anda bisa

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
sumber

10

http://jsfiddle.net/QWDxr/1/

Gunakan properti "min-height".
Berhati-hatilah dengan paddings, margin dan border :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
sumber

1

tidak .. itu mengisi seluruh halaman dengan margin atas. saya hanya ingin mengisi div tertentuB

— Alfred

Ini berfungsi dengan benar di chrome dan firefox. Jika ini tidak berhasil untuk Anda, Anda dapat menggunakan Faux Columns

— x10

itu berhasil, tetapi memotong footer div id= D. Saya tidak ingin melewati div d

— Alfred

2

height:100%tidak ada titik koma untuk #B2gaya.

— Emil

5

Yang sesuai dengan tujuan saya adalah membuat div yang selalu dibatasi dalam jendela browser secara keseluruhan dengan jumlah yang tetap.

Apa yang berhasil, setidaknya di firefox, adalah ini

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

Sejauh jendela sebenarnya tidak dipaksa untuk menggulir, div mempertahankan batasnya ke tepi jendela selama semua pengaturan ulang.

Semoga ini menghemat waktu seseorang.

— Leo Smith
sumber

5

Jika Anda akan menggunakan B2 untuk tujuan penataan, Anda dapat mencoba "retasan" ini

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— Teneff
sumber

1

Ini berhasil, terima kasih. Ngomong-ngomong, seharusnya begitu margin-bottom: -9999px;. Anda kehilangan minusnya.

— Gaui

1

Posisi wadah B2 relatif

Posisi teratas B2 + dari ketinggian yang tersisa

Tinggi B2 + tinggi B1 atau tinggi tersisa

— Dmytro Yurchenko
sumber

Mengatur simpul induk ke posisi relatif memecahkan masalah saya yang tidak terkait! Terima kasih!

— Deejers

0

Saya menggunakan height: stretch;. Di sini Anda dapat menemukan beberapa detail tentang penggunaan.

— Ihor
sumber

-4

Saya akan menyelesaikannya dengan solusi javascript (jQUery) jika ukurannya dapat bervariasi.

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
sumber

8

Anda mungkin ingin menambahkan itu ke pertanyaan Anda :)

— NKCSS

48

Bukankah tidak adanya tag javascriptatau jquerycukup?

— kapa

1

Ini juga sama sekali tidak perlu. CSS telah berkembang pesat dalam beberapa tahun terakhir. Checkout flex-box dan calc ().

— Shawn Whinnery

1

Flexbox tidak mendukung <IE10 :(

— Constant Meiring

@ConstantMeiring Pertanyaan sebenarnya adalah, apakah ada yang peduli tentang <IE10? ;)

— Clonkex

Cara meregangkan tinggi div untuk mengisi div induk - CSS