div'in yüksekliğini içeriğiyle genişletmek

376

Bu yuvalanmış div var ve içinde DIVs karşılamak için (yükseklik) genişletmek için ana konteyner gerekir

    <!-- 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 şudur:

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

Sahip olduğum sorun #main_content, arka plana karşı devam ettikleri sonuç ile tüm iç div'ları karşılamak için gerilmemesi.

Yukarıdaki senaryoyu dikkate alarak bu sorunu nasıl çözebilirim?

css  height 
— patrick
kaynak
5
Çocuklar cevaplar için hepinize teşekkür ederim! özel durumum için en iyi çözüm her iki tarafı temizlemek için bir BR kodlamak oldu (teşekkürler Jennyfofenny ve ayrıca Ricebowl) Yine de, diğer çözümler de işe yaradı: taşma koymak: auto was ok ve kayan #main_content de ok (rağmen ir bu div'in genişliğini alt div'ların boyutuna küçültdü). Şimdi bir acemi olarak merak ediyorum: bu çözümlerin dezavantajları var mı yoksa kayıtsız bir şekilde kullanabilir miyim? (örneğin, belki biri IE6 veya benzeri ile çalışmaz ...)
— patrick
1
@Patrick, sorunuzu daha da geliştirmek istiyorsanız, 'düzenle' bağlantısını tıklayın (sorunun mevcut metninin altında) ve diğer soruları ekleyin. Sözleşme <strong>Edited</strong>$Reason_for_revising_question..., odak noktasında büyük bir değişiklik veya ekleme varsa, değişiklikleri yansıtmak için soru başlığını değiştirmeniz gerekebilir. =)
— David, Monica'nın
4
divEtiketi asla ile kapatmadınız id='container'. Bu bazı sorunlara neden olabilir.
— Batkins
@patrick, ayrıca .clearsınıf için CSS'niz de yok . Unuttun mu yoksa orijinal kodun içinde mi? Bu konuda .clearsınıf, br@jennyfofenny'nin yanıtlarında belirtildiği gibi çok önemlidir.
— Cannicide

Yanıtlar:

280

Div kapatılmadan clear:bothönce #main_contenta'yı zorlamanız gerekir . Muhtemelen div <br class="clear" />;içine taşımak #main_contentve CSS:

.clear { clear: both; }

Güncelleme: Bu soru hala oldukça fazla trafik alıyor, bu yüzden CSS3'te Esnek kutular veya Flexbox adlı yeni bir düzen modu kullanarak cevabı modern bir alternatifle güncellemek istedim :

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>
Snippet'i genişlet

Çoğu modern tarayıcı şu anda Flexbox ve görünüm alanı birimlerini desteklemektedir , ancak eski tarayıcılar için destek sağlamanız gerekiyorsa, belirli tarayıcı sürümünün uyumluluğunu kontrol ettiğinizden emin olun.

— jennyfofenny
kaynak
4
İşte CSS clear özelliğindeki w3schools makalesi. Temel olarak, temiz, temizliğin uygulandığı öğenin akışındaki şamandıraların altında başlayacağı anlamına gelir (sadece sol, sadece sağ veya her ikisi).
— jennyfofenny
230

Bunu dene: overflow: auto;

Benim sorunum için çalıştı ..

— sipőcz péter
kaynak
10
+1, Bu çözüm zariftir ve sayfanıza görünmez bir etiket eklemez. Şu kemanı görün: jsfiddle.net/XmKrm/1
— Nabil Kadimi
5
taşma otomatik benim için iyi çalıştı. Taşma otomatik kabının yüksekliği içindeki içerikten daha azsa, bu bir kaydırma çubuğu ekleyecektir. Çok boyutlandırın veya yüksekliği ayarlayın: taşma ile birlikte otomatik.
— Bryan Myers
@ Roozbeh15 eklenti display: block;onunla
— BadAtPHP
2
En iyi ve en kolay çözüm ... Günümü kurtardın. Teşekkürler
— Kashyap Kotak
kutsal shet bu harika çalıştı. kimse bunun neden işe yaradığını altında mekanizması açıklamak umurunda değil mi?
— Merkurial
86

aşağıdakileri ekleyin:

overflow:hidden;
height:1%;

ana div. <br />Temiz için ekstra ihtiyacını ortadan kaldırır.

— Nick
kaynak
Vaov! beklediğimden tam tersini yaptı! overflow: hidden = içeriğe sığacak şekilde genişlet! Bunu asla tahmin edemezdim!
— mulllhausen
Evet, bu benim için de işe yaradı ve neden olduğu tam olarak mantıklı değil. "Yükseklik% 1" ve "taşma gizli" nin neden çalıştığına dair herhangi bir açıklama var mı?
— acarlon
1
gerçekten nasıl ve hatta neden çalışıyor, eğer bir yükseklik ayarlanmamışsa, taşan gizli neden her şeyi gizlemekle kalmaz (çünkü yükseklik 0'dır), ancak kendini genişletir, herhangi bir açıklama var mı ya da sadece inan ve mutlu ol?
— Max Yari
1
taşma: gizli kaydırma çubuklarını gizler ancak bloğun boyutunu korur
— authentictech
benim için sadece 'taşma: gizli' ama 'taşma: otomatik' ile çalıştı ve ayrıca kaydırma çubuklarını göstermedi.
— Whirlwind991
60

alternatif bir yol olarak, bazı durumlarda yararlı olabilecek bunu da deneyebilirsiniz 

display:table;

jsFiddle

— h0mayun
kaynak
24

Sadece kullanırdım

height: auto;

bölgenizde. Evet, biraz geç kaldığımı biliyorum ama bunun burada olsaydı bana yardım edebileceğini düşündüm.

— Charles
kaynak
height: auto;aşağıdaki tüm öğelerin en üste taşınmasına neden olur. Bu özellik ana içerik bölümümde olduğunda, sayfamın altbilgisi başlığa dokunacak ve içerik bölümümle çakışacak şekilde yukarı doğru hareket ediyor.
— Aaron Franke
1
Benim için çözüm buydu. Teşekkürler!
— Nik Hammer-Ellis
14

Thw aşağıdaki çalışmalıdır:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}
— Steerpike
kaynak
taşma ekleme: otomatik çalıştı, ancak genişlik:% 100 eklersem div (#main_content) öğesinin üst div öğesinden biraz daha büyük olmasına neden olur. Neden anlaşılmadı!
— patrick
2
çünkü dolgu genişliği belirtilen genişliğe ek olarak sayılır, bu nedenle elemanınızın genişliği% 100 + 5
— piksel
1
taşma: otomatik; benim için çalıştı, çok teşekkür ederim veddy.
— Cosco Tech
8

Span etiketini display:inline-blockcss iliştirilmiş olarak kullanın. Daha sonra CSS kullanabilir ve bir div gibi birçok yönden manipüle edebilirsiniz, ancak bir içermezseniz widthveya heightiçeriğine göre genişler ve geri çekilir.

Umarım yardımcı olur.

— karanlık marc
kaynak
Umudun işe yaradı: en azından bana yardımcı oldu! :) Btw, elemanımı div(yerine span) olarak bıraktım ama display: inline-blockhala davamda (Chromium) çalıştım.
— snapfractalpop
6

Tipik olarak clear:both, bunun son alt öğe üzerindeki bir kuralı zorlayarak çözülebileceğini düşünüyorum #items_list.

Şunlardan birini kullanabilirsiniz:

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

Veya dinamik bir dil kullanıyorsanız, listenin kendisini oluşturan döngüde oluşturulan son öğeye ek bir sınıf ekleyin, böylece html'nizde aşağıdaki gibi bir şey elde edersiniz:

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

ve css

.last_list_item {clear: both; }
— David, Monica'yı eski durumuna getirdi
kaynak
6

Bu sorun, bir Üst Düzey Div öğesinin Alt öğeleri yüzen olduğunda ortaya çıkar. İşte sorunun en son çözümü :

CSS dosyanıza sözde seçici ile birlikte .clearfix adlı şu sınıfı yazın : after 

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

Ardından, HTML'nizde .clearfix sınıfını üst Div'inize ekleyin . Örneğin:

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

Her zaman çalışmalı. Kodu daha semantik hale getireceğinden, sınıf adını .clearfix yerine .group olarak çağırabilirsiniz . "" Çift tırnak arasına İçerik değerinde nokta, hatta bir boşluk eklemek gerekli değildir . Ayrıca taşma: otomatik; sorunu çözebilir ancak kaydırma çubuğunu gösterme gibi başka sorunlara neden olur ve önerilmez.

Kaynak: Lisa Catalano ve Chris Coyier'in blogu

— Ifti Mahmud
kaynak
5

div'a bir float özelliği ekleyin #main_content- daha sonra kayan içeriğini içerecek şekilde genişler

— ışın
kaynak
Teşekkürler Ray, div değerini genişliğine sahip içeriğinin boyutuna (#items_list) daraltmasına rağmen çalıştı: 400px; #Main_content tam genişliğinde kalsaydı, çözümünüz gerçekten iyi olurdu - herhangi bir öneriniz var mı?
— patrick
@ 2 ve biraz yıllar sonra ve bu da bana benzer bir problemle potansiyel bir baş ağrısından kurtardı. Teşekkür ederim!
— John H
4

Herhangi bir şey yapmadan önce css kurallarını kontrol edin:

{ position:absolute }

Varsa kaldırın ve onlara ihtiyacınız yok.

— onalbi
kaynak
2
Çünkü "mutlak konumlandırılmış elemanlar akıştan çıkarılır, böylece diğer elemanlar tarafından dikkate alınmaz. Böylece ebeveynlerin yüksekliğini kesinlikle konumlandırılmış bir elemana göre ayarlayamazsınız." stackoverflow.com/questions/12070759/…
— Federico
4

Kayan elemanlar, ana elemanın içindeki alanı işgal etmez, Adından da anlaşılacağı gibi! Bu nedenle, alt öğelerinin yüzen olduğu bir öğeye açıkça yükseklik sağlanmazsa, üst öğenin küçüleceği ve alt öğenin boyutlarını kabul etmediği ve ayrıca alt öğelerinin overflow:hidden;ekranda görünmeyebileceği görülecektir. Bu sorunla başa çıkmanın birçok yolu vardır:

  1. Kayan elemanın altına başka bir eleman ekleyin clear:both;veya kayan elemanın clear:both;üzerinde kullanın :after.

  2. Yerine display:inline-block;veya flex-boxkullanın float.

— Apoorv Srivastava
kaynak
3

Bu işe yarıyor gibi görünüyor

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

Ekran boyutunu minimum olarak alır ve içerik genişlerse büyür.

— SubstanceMX
kaynak
2

sectionEkran yüksekliğinin% 100'üne ayarladığım etiketleri olan bir projeye Bootstrap ekledim . Projeyi duyarlı hale getirene kadar iyi çalıştı, bu noktada jennyfofenny'nin cevabının bir kısmını ödünç aldım böylece bölüm arka , ekran boyutu daha küçük ekranlarda değiştiğinde içeriğin arka planıyla eşleşti.

Yeni sectionCSS'm şöyle görünüyor:

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

Diyelim ki belirli bir renkte bir bölümünüz var. Kullanarak min-height, bölümün genişliği daha küçük bir ekran nedeniyle küçülürse, bölümün yüksekliği genişler, içerik bölüm içinde kalır ve arka planınız istediğiniz renkte kalır.

— Adrian
kaynak
2

Geleneksel yolu denediniz mi? ana kap yüksekliğini verin: otomatik

#container{height:auto}

Bunu kullandım ve çoğu zaman benimle çalıştı.

— Michelle Dimwaite
kaynak
1

Ben kendim bir proje üzerinde bu çalışıyorum - div bir div içinde div altından dökülen bir tablo vardı. Denediğim yükseklik düzeltmelerinin hiçbiri işe yaramadı, ancak bunun için garip bir düzeltme buldum ve div'ın altına bir nokta koymak için bir paragraf koymak. Ardından, metnin "rengini" kabın arka planıyla aynı olacak şekilde biçimlendirin. İstediğiniz gibi düzgün çalıştı ve hiçbir javascript gerekli. Kesintisiz bir alan çalışmaz - şeffaf bir görüntü de çalışmaz.

Görünüşe göre, onu içerecek şekilde genişletmek için tablonun altında bir miktar içerik olduğunu görmek gerekiyordu. Bunun başkaları için işe yarayıp yaramayacağını merak ediyorum.

Bu, tasarımcıların tablo tabanlı düzenlere başvurmasını sağlayan bir şeydir - bu şeyleri anlamaya ve çapraz tarayıcı uyumlu hale getirmeye harcadığım zaman beni deli ediyor.

— Nancy Hastings-Trew
kaynak
Bunu css ile yapmanın bir yolu olmalı, ama bunun ne olacağı hakkında hiçbir fikrim yok. Bu benim için çalıştı, ancak genişlik eklemek zorunda kaldım:% 100; yüksekliği: otomatik; dakika-yüksekliği: 100%; konum: göreceli;
— RationalRabbit
1

Bunu denedim ve işe yaradı

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>
— Ahmed Aboelela
kaynak
0

JQuery UI kullanıyorsanız, zaten <div>genişletmek istediğiniz height:auto; div'ın altındaki a cazibesini ekleyen bir sınıf var , daha sonra bir sınıf adı ui-helper-clearfix ekleyin veya bu stil özelliğini kullanın ve aşağıdaki gibi ekleyin :

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

jQuery UI sınıfını genişletmek istediğiniz div'a değil, temiz div'e ekleyin.

— Lucas M. Oliveira
kaynak
0

Bu tür eski bir iplik olduğunu biliyorum, ancak, bu min-heighttemiz bir şekilde CSS özelliği ile elde edilebilir, bu yüzden gelecekteki referanslar için burada bırakacağız:

Burada yayınlanan OP koduna göre bir keman yaptım: http://jsfiddle.net/U5x4T/1/ , içeride div kaldırıp ekledikçe, kabın boyutunu nasıl genişletir veya küçültür

Bunu başarmak için ihtiyacınız olan tek şey OP koduna ek olarak:

* Ana kapta taşma (yüzen div'ler için gereklidir)

* min yükseklik css özelliği, daha fazla bilgi burada bulunabilir: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Juan Carlos Alpizar Chinchilla
kaynak
0

Eklenen ekran: div'a satır içi ve yükseklik içeriği 200 piksel ayarlanan div yüksekliğinden daha büyük olduğunda otomatik olarak (kaydırma öğesi değil) büyüdü

— Jelle
kaynak
1
Bu sorunun açık bir cevabı değil. Açıklamalar için lütfen yorum işlevini kullanın.
— ksbg
0

CSS Izgara Düzeni'ni kullanabilirsiniz . Destek şu anda oldukça geniştir: caniuse üzerinde kontrol edin .

İşte jsfiddle örneği . Ayrıca tonlarca metin ile örnek .

HTML Kodu:

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

CSS Kodu: 

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
kaynak
0

Yukarıda listelenen hemen hemen her öneriyi denedim ve hiçbiri işe yaramadı. Ancak, "display: table" benim için hile yaptı.

— PongGod
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.