İçeride yüzerken bir div yüksekliği nasıl büyütülebilir?

121

İçinde yüzen bir div'in yüksekliğini nasıl büyütebilirim? Genişlik için bir değer tanımlamanın ve taşmayı gizli olarak ayarlamanın işe yaradığını biliyorum. Sorun şu ki, görünür taşma ile bir div'e ihtiyacım var. Herhangi bir fikir?

— pedrozath
kaynak

278

overflow:auto;üzerinde bulunan div, içindeki her şeyi (yüzen öğeler bile) görünür kılar ve dış div, bunların etrafını tamamen sarar. Bu örneğe bakın:

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

Snippet'i genişlet

— JakeParis
kaynak

7

Evet, işe yarıyor, ama kaydırma çubukları oluşturma tehlikesi var .. değil mi?

— pedrozath

1

Hayır, @pedro'yu bildiğimden değil. Dış div, iç div'leri sarmak için genişlemeye devam etmelidir. keman içinde deneyin, iç bölümlerin boyutlarını artırın ve ne olacağını görün.

— JakeParis

2

Bunu denedim ve tarayıcı penceresinin sağında yaklaşık 2 milyon uzunluğunda küçük bir kaydırma çubuğu belirdi.

— Nigel Alderton

1

@NigelAlderton bu benim için oluyordu çünkü kabın yüksekliğini ( overfloweklendiği yer) zorluyordum . overflow: auto;height

— Sınıftan

16

Şamandıraları temizlemenin birden fazla yolu vardır. Bazılarını buradan kontrol edebilirsiniz:
http://work.arounds.org/issue/3/clearing-floats/

Örneğin, clear:bothsizin için çalışabilir

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

— Nikita Rybak
kaynak

1

Bu yaklaşımın yararı overflow: auto;, öğenin dışına taşan içeriği (odak süsleri gibi) kırpmasıdır, ancak bu olmayacaktır.

— Dan

overflow: otomatik benim için yatay bir kaydırma çubuğu oluşturdu, bu yüzden kullanamadım. Bu mükemmel çalıştı.

— Edwin Stoteler

Tam olarak aradığım şey. Bu CSS, üst öğeye uygulandı. Üst <div> öğesinin yüksekliğini genişletir, böylece yüzen öğe içinde kalır. Zarif, çünkü açıkça şunu belirtiyor: "Üstün alt kısmı şamandırayı temizlemelidir."

— IAM_AL_X

12

Çoğu durumda overflow: auto;yeterli olacaktır, ancak tamamlama ve çapraz tarayıcı desteği için Clearfix'e bir göz atın işi tüm tarayıcılar için yapacak olan .

Şu işaretlemeyi düşünelim ..

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

Aşağıdaki stillerle birlikte ..

.content { float:left; }

.clearfix { ..from link.. }

Düzeltme olmadan, ebeveynin havada divsüzülen çocukları nedeniyle boyu olmazdı. Düzeltme, ebeveynin yüzen çocukları düşünmesini sağlar.

— miphe
kaynak

2

Clearfix ekstra işaretlemedir. Basitçe ebeveyn div işaretlemeyi verinoverflow: auto;

— JakeParis

7

Bunu yapmanın harika bir yolunun div'i ayarlamak olduğunu düşündüm display: table.

— pedrozath
kaynak