Tinggi Div 100% dan berkembang agar sesuai konten

Saya memiliki elemen div pada halaman saya dengan ketinggian diatur ke 100%. Ketinggian tubuh juga diatur ke 100%. Bagian dalam div memiliki latar belakang dan semua itu dan berbeda dari latar belakang tubuh. Ini berfungsi untuk membuat ketinggian div 100% dari tinggi layar browser, tetapi masalahnya adalah saya memiliki konten di dalam div itu yang meluas secara vertikal melampaui ketinggian layar browser. Ketika saya gulir ke bawah, div berakhir pada titik di mana Anda harus mulai menggulir halaman, tetapi konten meluap melebihi itu. Bagaimana cara membuat div selalu berjalan jauh ke bawah agar sesuai dengan konten batin?

Berikut penyederhanaan CSS saya:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Setelah saya menggulir halaman, kegelapan berakhir dan konten mengalir ke latar belakang merah. Tampaknya tidak masalah apakah saya mengatur posisi ke relatif atau absolut pada #some_div, masalah terjadi dengan cara apa pun. Konten di dalam #some_div sebagian besar benar-benar diposisikan, dan secara dinamis dihasilkan dari database sehingga tingginya tidak dapat diketahui sebelumnya.

Sunting: Ini adalah tangkapan layar masalah:

Inilah yang harus Anda lakukan dalam gaya CSS div

display: block;
overflow: auto;

Dan jangan disentuh height

Atur heightto autodan min-heightto 100%. Ini harus menyelesaikannya untuk sebagian besar browser.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Biasanya masalah ini muncul ketika elemen Anak dari Div Induk mengambang. Inilah Solusi Terbaru dari masalah:

Dalam file CSS Anda, tulis kelas berikut bernama .clearfix bersama dengan pemilih semu : setelah

.clearfix:after {
content: "";
display: table;
clear: both;
}

Kemudian, di HTML Anda, tambahkan kelas .clearfix ke Div orang tua Anda. Sebagai contoh:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Itu harus selalu berhasil. Anda dapat memanggil nama kelas sebagai .group daripada .clearfix , karena akan membuat kode lebih semantik. Perhatikan bahwa, Tidak perlu menambahkan titik atau bahkan spasi dalam nilai Konten di antara kutip ganda "". Juga, overflow: otomatis; mungkin menyelesaikan masalah tetapi menyebabkan masalah lain seperti menampilkan bilah gulir dan tidak disarankan.

Sumber: Blog Lisa Catalano dan Chris Coyier

Jika Anda hanya meninggalkan height: 100%dan menggunakan display:block;yang divakan mengambil ruang sebanyak isi di dalam div. Dengan cara ini semua teks akan tetap berada di latar belakang hitam.

Pertanyaan ini mungkin sudah lama, tetapi perlu diperbarui. Berikut cara lain untuk melakukannya:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Coba ini:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6 dan versi sebelumnya tidak mendukung properti min-height.

Saya pikir masalahnya adalah ketika Anda memberi tahu tubuh untuk memiliki tinggi 100%, latar belakangnya hanya setinggi hieght dari satu "viewport" browser (area tampilan yang tidak termasuk bilah alat peramban & statusbars & menubar dan tepi jendela). Jika konten lebih tinggi dari satu viewport, itu akan meluap ketinggian yang dikhususkan untuk latar belakang.

Properti min-height pada bodi ini harus membuat latar belakang FORCE setidaknya setinggi satu viewport jika konten Anda tidak mengisi satu halaman penuh ke bawah, namun juga membiarkannya tumbuh ke bawah untuk mencakup lebih banyak konten interior.

Pertanyaan lama, tetapi dalam kasus saya saya menemukan menggunakan position:fixedmenyelesaikannya untuk saya. Situasi saya mungkin sedikit berbeda. Saya memiliki semi transparan overlay divdengan animasi memuat di dalamnya yang saya perlu ditampilkan saat halaman sedang memuat. Jadi menggunakan height:auto / 100%atau min-height: 100%keduanya mengisi jendela tetapi bukan area di luar layar. Menggunakan position:fixedoverlay ini membuat gulir dengan pengguna, sehingga selalu menutupi area yang terlihat dan membuat animasi preloading saya terpusat di layar.

Cukup tambahkan dua baris ini di id css Anda #some_div

display: block;
overflow: auto;

Setelah itu Anda akan mendapatkan apa yang Anda cari!

Saya tidak sepenuhnya yakin bahwa saya telah memahami pertanyaan itu karena ini adalah jawaban yang cukup mudah, tetapi begini ... :)

Sudahkah Anda mencoba mengatur properti overflow wadah agar terlihat atau otomatis?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Menambahkan yang seharusnya mendorong wadah hitam ke ukuran apa pun yang dibutuhkan wadah dinamis Anda. Saya lebih suka terlihat otomatis karena tampaknya otomatis datang dengan scroll bar ...

Browser modern mendukung unit "tinggi viewport". Ini akan memperluas div ke ketinggian viewport yang tersedia. Saya merasa lebih dapat diandalkan daripada pendekatan lain.

#some_div {
    height: 100vh;
    background: black;
}

Bahkan kamu bisa melakukan seperti ini

display:block;
overflow:auto;
height: 100%;

Ini akan mencakup setiap div dinamis Anda sesuai konten. Misalkan jika Anda memiliki div umum dengan kelas, maka akan menambah tinggi setiap div dinamis sesuai dengan kontennya

Anda juga bisa menggunakan

 display: inline-block;

punyaku bekerja dengan ini

OVERLAY TANPA POSISI: TETAP

Cara yang sangat keren. Saya telah menemukan ini untuk menu baru-baru ini adalah mengatur tubuh untuk:

position: relative

dan atur kelas pembungkus Anda seperti ini:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Ini berarti Anda tidak perlu mengatur posisi tetap dan masih dapat memungkinkan untuk menggulir. Saya telah menggunakan ini untuk overlay menu yang BENAR-BENAR besar.

gunakan flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Ok, saya mencoba sesuatu seperti ini:

tubuh (normal)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

Ini bukan cara yang tepat untuk menulisnya, tetapi jika Anda membuat tampilan div utama sebagai sebuah tabel, itu akan mengembang dan kemudian saya menerapkan scroll bar.