membuat ketinggian div membesar dengan isinya

376

Saya memiliki div bersarang ini dan saya perlu wadah utama untuk memperluas (tingginya) untuk mengakomodasi DIVs di dalamnya

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS adalah ini:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Masalah yang saya miliki adalah bahwa #main_contenttidak meregang untuk mengakomodasi semua div batin, dengan hasil bahwa mereka terus berjalan dengan latar belakang.

Bagaimana saya bisa menyelesaikan masalah ini dengan mempertimbangkan skenario di atas?

css height

— patrick
sumber

5

Teman-teman terima kasih atas jawabannya! solusi terbaik untuk kasus spesifik saya adalah dengan hard-code BR untuk membersihkan kedua belah pihak (terima kasih Jennyfofenny dan juga Ricebowl) Lagi pula, solusi lain telah bekerja: meletakkan overflow: otomatis ok, dan mengambang #main_content juga ok (walaupun ir mengurangi lebar div itu menjadi ukuran div anak). Sekarang menjadi seorang pemula saya bertanya-tanya: apakah solusi ini memiliki kelemahan, atau saya dapat menggunakannya dengan acuh tak acuh? (mis. mungkin salah satu dari mereka tidak bekerja dengan IE6, atau serupa ...)

— patrick

1

@ Patrick, jika Anda ingin mengembangkan pertanyaan Anda lebih lanjut, klik tautan 'edit' (di bawah teks pertanyaan saat ini) dan tambahkan pertanyaan selanjutnya. Konvensi menyarankan menggunakan sesuatu seperti <strong>Edited</strong>$Reason_for_revising_question...Anda mungkin perlu mengubah judul pertanyaan untuk mencerminkan perubahan jika ada perubahan besar atau penambahan dalam fokusnya. =)

— David mengatakan mengembalikan Monica

4

Anda juga tidak pernah menutup divtag dengan id='container'. Itu bisa menyebabkan beberapa masalah.

— Batkins

@ Patrick, Anda juga tidak memiliki CSS untuk .clearkelas. Apakah Anda lupa, atau apakah itu dalam kode asli Anda? The .clearkelas pada yang brsangat penting sebagai @jennyfofenny menyebutkan dalam jawaban mereka.

— Cannicide

281

Anda harus memaksakan clear:bothsebelum #main_contentdiv ditutup. Saya mungkin akan memindahkannya <br class="clear" />;ke #main_contentdiv dan mengatur CSS menjadi:

.clear { clear: both; }

Pembaruan: Pertanyaan ini masih mendapatkan cukup banyak lalu lintas, jadi saya ingin memperbarui jawabannya dengan alternatif modern menggunakan mode tata letak baru di CSS3 yang disebut kotak Fleksibel atau Flexbox :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Luaskan cuplikan

Sebagian besar browser modern saat ini mendukung unit Flexbox dan viewport , tetapi jika Anda harus mempertahankan dukungan untuk browser lama, pastikan untuk memeriksa kompatibilitas untuk versi browser tertentu.

— jennyfofenny
sumber

4

Inilah artikel w3schools tentang properti CSS clear. Pada dasarnya, clear berarti bahwa elemen yang diterapkan jelas mulai di bawah mengapung dalam alirannya (baik hanya kiri, hanya kanan atau keduanya).

— jennyfofenny

230

Coba ini: overflow: auto;

Ini berhasil untuk masalah saya ..

— sipőcz péter
sumber

10

+1, Solusi ini elegan dan tidak menambahkan tag yang tidak terlihat ke halaman Anda. Lihat biola ini: jsfiddle.net/XmKrm/1

— Nabil Kadimi

5

auto overflow bekerja dengan baik untuk saya. FYI ini akan menambahkan bilah gulir jika ketinggian wadah otomatis limpahan kurang dari konten di dalamnya. Ukur juga atau atur tinggi: otomatis seiring dengan luapan.

— Bryan Myers

@ Roozbeh15 tambahkan display: block;dengan itu

— BadAtPHP

2

Solusi terbaik dan termudah ... Anda menghemat hari saya. Terima kasih

— Kashyap Kotak

dia suci ini bekerja luar biasa. adakah yang mau menjelaskan mekanisme di bawahnya mengapa ini berhasil?

— Merkurial

86

tambahkan yang berikut:

overflow:hidden;
height:1%;

ke div utama Anda. Menghilangkan kebutuhan ekstra <br />untuk yang jelas.

— Nick
sumber

Wow! yang melakukan kebalikan dari apa yang saya harapkan! overflow: hidden = perluas agar sesuai dengan konten! saya tidak akan pernah menduga itu!

— mulllhausen

Ya, ini juga bekerja untuk saya dan itu tidak masuk akal mengapa. Adakah penjelasan mengapa 'tinggi 1%' dan 'limpahan tersembunyi' berfungsi?

— acarlon

1

benar-benar bagaimana cara kerjanya dan bahkan mengapa ia bekerja, jika tidak ada ketinggian yang ditetapkan mengapa limpahan tersembunyi tidak hanya menyembunyikan segalanya (karena ketinggian 0) tetapi memperluas dirinya sendiri, adakah penjelasan atau hanya percaya dan bahagia?

— Max Yari

1

overflow: disembunyikan menyembunyikan scrollbar tetapi menjaga ukuran blok

— authentictech

bekerja untuk saya hanya dengan 'overflow: tersembunyi' tetapi 'overflow: otomatis' juga berfungsi dan tidak menampilkan scrollbar.

— Whirlwind991

60

sebagai cara alternatif Anda juga dapat mencoba ini yang mungkin berguna dalam beberapa situasi

display:table;

jsFiddle

— h0mayun
sumber

24

Saya hanya akan menggunakan

height: auto;

di div Anda. Ya, saya tahu saya sedikit terlambat tapi saya pikir ini mungkin membantu orang seperti itu akan membantu saya jika ada di sini.

— Charles
sumber

height: auto;menyebabkan semua item di bawah ini bergerak ke atas. Dengan properti ini di div konten utama saya, footer halaman saya bergerak ke atas sehingga menyentuh header dan tumpang tindih div konten saya.

— Aaron Franke

1

Ini solusi bagi saya. Terima kasih!

— Nik Hammer-Ellis

14

Hal-hal berikut harus bekerja:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

— Steerpike
sumber

menambahkan overflow: otomatis berfungsi, meskipun jika saya menambahkan juga lebar: 100%, yang menyebabkan div (#main_content) menjadi sedikit lebih besar daripada div induknya. Tidak mengerti mengapa!

— patrick

2

itu karena padding dihitung sebagai tambahan dari lebar yang ditentukan, sehingga lebar elemen Anda adalah 100% + bantalan 5px kiri + bantalan kanan 5px

— NickV

1

meluap: otomatis; bekerja untuk saya, terima kasih banyak veddy.

— Cosco Tech

9

Cara yang sangat sederhana

Pada DIV induk:

height: 100%;

Ini bekerja untuk saya setiap saat

— Daniel Beltrami
sumber

8

Gunakan tag rentang dengan display:inline-blockcss terlampir. Anda kemudian dapat menggunakan CSS dan memanipulasinya seperti div dalam banyak cara tetapi jika Anda tidak menyertakan a widthatauheight memperluas dan menarik berdasarkan kontennya.

Semoga itu bisa membantu.

— marc gelap
sumber

Harapan Anda berhasil: setidaknya membantu saya! :) Btw, saya meninggalkan elemen saya sebagai div(bukan a span) tetapi display: inline-blockmasih berfungsi dalam casing saya (Chromium).

— snapfractalpop

6

Biasanya saya pikir ini bisa diselesaikan dengan memaksa clear:bothaturan pada elemen anak terakhir dari #items_list.

Anda dapat menggunakan:

#items_list:last-child {clear: both;}

Atau, jika Anda menggunakan bahasa dinamis, tambahkan kelas tambahan ke elemen terakhir yang dihasilkan dalam loop apa pun yang membuat daftar itu sendiri, sehingga Anda berakhir dengan sesuatu di html Anda seperti:

<div id="list_item_20" class="last_list_item">

dan css

.last_list_item {clear: both; }

— David mengatakan mengembalikan Monica
sumber

6

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

Dalam file CSS Anda, tulis kelas berikut yang disebut .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 kutipan 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

— Ifti Mahmud
sumber

5

tambahkan properti float ke #main_contentdiv - itu kemudian akan diperluas untuk mengandung konten yang melayang

— sinar
sumber

Terima kasih Ray, ini berfungsi meskipun menyusut div ke ukuran kontennya (#items_list) yang memiliki lebar: 400px; Solusi Anda akan sangat bagus jika saya bisa membuat #main_content tetap pada tempatnya - ada saran?

— patrick

@ Ray 2 dan beberapa tahun kemudian dan ini hanya menyelamatkan saya dari sakit kepala potensial dengan masalah yang sama. Terima kasih!

— John H

4

Sebelum melakukan apa pun periksa aturan css dengan:

{ position:absolute }

Hapus jika ada dan tidak membutuhkannya.

— onalbi
sumber

2

Karena "elemen posisi absolut dihilangkan dari aliran, sehingga diabaikan oleh elemen lain. Jadi, Anda tidak dapat mengatur ketinggian orangtua menurut elemen yang diposisikan benar-benar." stackoverflow.com/questions/12070759/...

— Federico

4

Elemen melayang tidak menempati ruang di dalam elemen induk, Seperti namanya mereka melayang! Jadi, jika ketinggian secara eksplisit tidak disediakan untuk elemen yang elemen anak-nya melayang, maka elemen induk akan tampak menyusut & tampaknya tidak menerima dimensi elemen anak, juga jika diberikan overflow:hidden;, anak-anaknya mungkin tidak muncul di layar. Ada beberapa cara untuk mengatasi masalah ini:

Masukkan elemen lain di bawah elemen terapung dengan clear:both;properti, atau gunakan clear:both;pada :afterelemen terapung.
Gunakan display:inline-block;atau flex-boxbukan float.

— Apoorv Srivastava
sumber

3

Sepertinya ini berfungsi

html {
 width:100%;
 height:auto;
 min-height:100%
}

Dibutuhkan ukuran layar minimum, dan jika konten membesar maka akan bertambah.

— SubstanceMX
sumber

2

Dalam CSS: #clear_div{clear:both;}

Setelah tag div dari inner div tambahkan div berikut ini baru

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : untuk informasi lebih lanjut

— ingrid
sumber

2

Saya menambahkan Bootstrap ke proyek dengan sectiontag yang telah saya atur hingga 100% dari ketinggian layar. Itu bekerja dengan baik sampai saya membuat proyek responsif, di mana saya meminjam sebagian dari jawaban jennyfofenny sehingga latar belakang bagian saya cocok dengan latar belakang konten ketika ukuran layar berubah pada layar yang lebih kecil.

sectionCSS baru saya terlihat seperti ini:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Katakanlah Anda memiliki bagian yang berwarna tertentu. Dengan menggunakan min-height, jika lebar bagian menyusut karena layar yang lebih kecil, ketinggian bagian akan membesar, konten akan tetap berada di dalam bagian tersebut, dan latar belakang Anda akan tetap warna yang diinginkan.

— Adrian
sumber

2

Sudahkah Anda mencoba cara tradisional? berikan tinggi kontainer utama: otomatis

#container{height:auto}

Saya telah menggunakan ini dan itu berfungsi sebagian besar waktu dengan saya.

— Michelle Dimwaite
sumber

1

Saya mengalami ini pada proyek sendiri - Saya punya meja di dalam div yang tumpah keluar dari bagian bawah div. Tidak ada perbaikan ketinggian yang saya coba, tetapi saya menemukan perbaikan yang aneh untuk itu, dan itu adalah meletakkan paragraf di bagian bawah div dengan hanya satu periode di dalamnya. Kemudian gaya "warna" teks menjadi sama dengan latar belakang wadah. Bekerja dengan baik sesukamu dan tidak perlu javascript. Ruang tanpa putus tidak akan berfungsi - gambar transparan juga tidak.

Rupanya itu hanya perlu untuk melihat bahwa ada beberapa konten di bawah meja untuk meregang untuk menampungnya. Saya ingin tahu apakah ini akan bekerja untuk orang lain.

Ini adalah jenis hal yang membuat perancang menggunakan tata letak berbasis tabel - jumlah waktu yang saya habiskan untuk mencari tahu hal ini dan membuatnya kompatibel lintas-browser membuat saya gila.

— Nancy Hastings-Trew
sumber

Pasti ada cara untuk melakukan ini dengan css, tapi saya tidak tahu apa yang akan terjadi. Ini bekerja untuk saya, tetapi saya harus menambahkan lebar: 100%; tinggi: otomatis; min-height: 100%; posisi: relatif;

— RationalRabbit

1

Saya mencoba ini dan itu berhasil

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

— Ahmed Aboelela
sumber

0

Jika Anda menggunakan jQuery UI, mereka sudah memiliki kelas karya yang hanya menambah pesona <div>di bagian bawah dalam div yang ingin Anda kembangkan height:auto; kemudian tambahkan nama kelas ui-helper-clearfix atau gunakan atribut gaya ini dan tambahkan seperti di bawah ini :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

tambahkan jQuery UI class ke div yang jelas, bukan div yang ingin Anda kembangkan.

— Lucas M. Oliveira
sumber

0

Saya tahu ini adalah jenis utas lama, namun, ini dapat dicapai dengan min-heightproperti CSS secara bersih, jadi saya akan meninggalkan ini di sini untuk referensi di masa mendatang:

Saya membuat biola berdasarkan OP yang diposting kode di sini: http://jsfiddle.net/U5x4T/1/ , saat Anda menghapus dan menambahkan divs di dalam, Anda akan melihat bagaimana wadah memperluas atau mengurangi ukuran

Hanya 2 hal yang Anda butuhkan untuk mencapai ini, tambahan untuk kode OP adalah:

* Melimpah di wadah utama (diperlukan untuk div mengambang)

* min-height css property, info lebih lanjut tersedia di sini: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Juan Carlos Alpizar Chinchilla
sumber

0

Tampilan yang ditambahkan: sebaris dengan div dan itu tumbuh otomatis (bukan barang gulir) ketika konten tinggi bertambah besar maka tinggi div yang diatur 200px

— Jelle
sumber

1

Ini bukan jawaban yang jelas untuk pertanyaan itu. Untuk komentar, silakan gunakan fungsi komentar.

— ksbg

0

Anda dapat menggunakan Layout Kotak CSS . Dukungan agak luas saat ini: periksa di caniuse .

Ini adalah contoh jsfiddle. Juga contoh dengan banyak hal teks.

Kode HTML:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Kode CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— Sharikov Vladislav
sumber

0

Saya mencoba hampir semua saran yang tercantum di atas dan tidak ada yang berhasil. Namun, "display: table" melakukan trik untuk saya.

— PongGod
sumber

-1

Tidak perlu menggunakan banyak CSS, cukup gunakan bootstrap, lalu gunakan:

class="container"

untuk div yang perlu diisi.

Anda bisa mendapatkan bootstrap dari sini

— Thadeo Arlo
sumber