Tinggi Div 100% dan berkembang agar sesuai konten


172

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: masalah div


Ini ditanyakan beberapa minggu lalu. Saya akan melihat apakah saya dapat menemukan pertanyaan itu. Saya yakin saya mengomentarinya. sunting Saya yakin pertanyaan Anda mirip dengan ini: stackoverflow.com/questions/9398313/…
jmbertucci

tolong kode Anda untuk pemahaman yang lebih baik
sandeep

dapatkah Anda memposting kode lengkap Anda
Sven Bieder

23
Anda ingin semua ribuan baris kode php, css, dan javascript saya? Saya memposting bagian css yang relevan dengan pertanyaan ...
Joey

2
NECROPOST IS A GO: pengaturan properti overflow umumnya perbaikan masalah seperti ini di mana konten dalam div adalah peregangan melewatinya ( overflow: hidden;, overflow: scroll;, dll).
AlbertEngelB

Jawaban:


308

Inilah yang harus Anda lakukan dalam gaya CSS div

display: block;
overflow: auto;

Dan jangan disentuh height


4
Bekerja dengan baik. Saya perlu untuk menambahkan height: 100%ke html, bodydan div kontainer untuk membuatnya mengisi tinggi ketika tidak ada cukup konten sekalipun.
Nico Huysamen

solusi luar biasa tetapi Anda benar-benar dapat menyentuh ketinggian jika objek adalah sesuatu seperti pemasangan jendela responsif
Alexis Rabago Carvajal

Apakah ini display: block;dibutuhkan? Div sudah menjadi elemen tingkat blok.
Max Heiber

itu menambahkan bilah gulir dalam untuk saya (baik horisontal dan vertikal)
Nathan H

Jika Anda masih mendapatkan elemen induk sedikit lebih tinggi daripada elemen anak-anak, maka periksa untuk ruang tambahan dan / atau  , hapus mereka. Coba juga untuk menyesuaikan ketinggian garis. Sebagai contoh saya sudah meletakkan line-height: 0, karena saya tidak perlu teks, hanya untuk menunjukkan gambar.
Zorgatone

57

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

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

3
IMO, ini menjawab pertanyaan "Bagaimana cara membuat div selalu berjalan jauh ke bawah agar sesuai dengan konten batin?" lebih baik daripada jawaban yang ditandai saat ini, yang hanya mengaktifkan pengguliran yang melimpah daripada memastikan div / body diperluas agar sesuai dengan kontennya. +1
Jammerz858

Bekerja untuk kasus saya. Terima kasih!
Tyson Nero

Mungkin perlu dicatat bahwa untuk beberapa alasan, tidak bekerja jika heightadalah 100%dan min-heightadalah auto- saya harapkan ini bisa saling dalam hal ini, tapi terlihat seperti mereka tidak.
PeaBrain

13

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


8

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.


Di mana Anda menggunakan display: block? Saya tidak melihat itu dalam pertanyaan Anda.
Lightness Races dalam Orbit

Saya menambahkannya ke #some_div setelah Ronnie menyarankannya, tetapi itu tidak memperbaiki masalah.
Joey

1
Bisakah Anda mencoba menambahkan float: none; ke css #some_div yang sama
RonnieVDPoel

Alih-alih float: none;, gunakan clear:both;. Itu melakukan hal yang sama tetapi lebih lintas-browser, @RonnieVDPoel
Cannicide

7

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

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

1
Jika Anda akan memposting pada pertanyaan lama, disarankan menggunakan nilai saat ini (AKA tanpa awalan pada flex).
jhpratt

Maaf saya tidak tahu apa yang Anda bicarakan.
user9459537

1
Awalan fleksibel belum diperlukan untuk sementara waktu sekarang.
jhpratt

Dan yang mana?
user9459537

5

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.


3

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.


1

Cukup tambahkan dua baris ini di id css Anda #some_div

display: block;
overflow: auto;

Setelah itu Anda akan mendapatkan apa yang Anda cari!


0

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


0

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

0

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


0

Anda juga bisa menggunakan

 display: inline-block;

punyaku bekerja dengan ini


0

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.


0

gunakan flex

.parent{
    display: flex
}

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

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.