Div yüksekliği% 100 ve içeriğe uyacak şekilde genişler

Sayfamda yüksekliği% 100 olarak ayarlanmış bir div öğesi var. Vücudun yüksekliği de% 100 olarak ayarlanır. İç div bir arka plana ve hepsine sahiptir ve vücut arka planından farklıdır. Bu, div yüksekliğini tarayıcı ekran yüksekliğinin% 100'ü yapmak için çalışır, ancak sorun, bu div içinde tarayıcı ekran yüksekliğinin ötesine dikey olarak uzanan içeriğe sahip olmam. Aşağı kaydırdığımda div, sayfayı kaydırmaya başlamak zorunda kaldığınız noktada sona erer, ancak içerik bunun ötesine taşar. Div'in iç içeriğe uyacak şekilde her zaman dibe kadar gitmesini nasıl sağlayabilirim?

İşte CSS'imin basitleştirilmesi:

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

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

Sayfayı kaydırdığımda, siyahlık sona erer ve içerik kırmızı arka plana akar. #Some_div'de konumu göreli veya mutlak olarak ayarlamam önemli değil, sorun her iki durumda da oluşuyor. #Some_div içindeki içerik çoğunlukla kesinlikle konumlandırılır ve dinamik olarak bir veritabanından oluşturulur, böylece yüksekliği önceden bilinemez.

Düzenleme: İşte sorunun ekran görüntüsü:

İşte CSS tarzında yapmanız gerekenler, ana div

display: block;
overflow: auto;

Ve dokunma height

Set heightiçin autove min-heightiçin 100%. Bu, çoğu tarayıcı için çözmelidir.

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

Genellikle bu sorun, bir Ana Divanın 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 veya boşluk bile eklemek gerekli değildir. Ayrıca taşma: otomatik; sorunu çözebilir ancak kaydırma çubuğunun gösterilmesi gibi başka sorunlara neden olur ve önerilmez.

Kaynak: Lisa Catalano ve Chris Coyier'in blogu

Sadece bırakırsanız height: 100%ve kullanmak içi içerik olarak çok boşluk olarak alacaktır . Bu şekilde tüm metinler siyah arka planda kalacaktır.display:block;divdiv

Bu soru eski olabilir, ancak bir güncellemeyi hak ediyor. İşte bunu yapmanın başka bir yolu:

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

Bunu dene:

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

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

IE6 ve önceki sürümleri min-height özelliğini desteklemez.

Bence sorun, vücuda% 100 yüksekliğe sahip olduğunuzu söylediğinizde, arka planın yalnızca bir tarayıcı "görünüm alanı" (tarayıcı araç çubukları ve durum çubukları ve menubarları hariç tutan alan ve pencere kenarları). İçerik bir görünüm penceresinden daha uzunsa, arka plana ayrılan yükseklikten taşacaktır.

Gövdedeki bu minimum yükseklik özelliği, içeriğiniz bir sayfanın tamamını aşağıya kadar doldurmuyorsa, arka planın en az bir görünüm alanı kadar zorlanmalıdır, ancak daha fazla iç içeriği kapsayacak şekilde aşağı doğru büyümesine izin vermelidir.

Eski soru, ama benim durumumda kullanarak buldum benim position:fixediçin çözdü. Durumum biraz farklı olabilirdi. divSayfa yüklenirken görüntülenmesi gereken bir yükleme animasyonu ile yer paylaşımlı bir yarı saydam vardı . Bu yüzden height:auto / 100%veya min-height: 100%her ikisini birden kullanmak pencereyi doldurdu, ancak ekran dışı alanı doldurmadı. Kullanarak position:fixedbu bindirme kaydırması kullanıcıyla yapılmış, böylece her zaman görünür alanı kapladı ve önyükleme animasyonumu ekranda ortaladı.

Bu iki satırı css kimliğinize ekleyin #some_div

display: block;
overflow: auto;

Bundan sonra aradığınızı alacaksınız!

Soruyu anladığımdan tam olarak emin değilim, çünkü bu oldukça basit bir cevap, ama işte gidiyor ... :)

Kabın taşma özelliğini görünür veya otomatik olarak ayarlamayı denediniz mi?

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

Bunu eklemek, siyah kabı dinamik kabınızın gerektirdiği boyuta itmelidir. Otomatik olarak görünmeyi tercih ederim çünkü otomatik kaydırma çubuklarıyla geliyor ...

Modern tarayıcılar "görüntü alanı yüksekliği" birimini destekler. Bu, div'i kullanılabilir görünüm yüksekliğine genişletir. Diğer yaklaşımlardan daha güvenilir buluyorum.

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

Bunu bile yapabilirsin

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

Bu, içeriğe göre her bir dinamik div'inizi içerecektir. Sınıfla ortak bir div'iniz varsa, içeriğe göre her dinamik div'in yüksekliğini artıracağını varsayalım

Ayrıca kullanabilirsiniz

 display: inline-block;

benimki bununla çalıştı

POZİSYON OLMADAN OVERLAY: SABİT

Son bir menü için bunu anladım gerçekten harika bir yol vücudu ayarlamak oldu:

position: relative

ve sarmalayıcı sınıfınızı şu şekilde ayarlayın:

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

Bu, konumu sabit olarak ayarlamanız gerekmediği ve yine de kaydırmaya izin verebileceğiniz anlamına gelir. Ben gerçekten büyük menü bindirme için kullandım.

flex kullan

.parent{
    display: flex
}

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

Tamam, böyle bir şey denedim:

gövde (normal)

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

Yazmanın tam yolu bu değildir, ancak ana div ekranını tablo olarak yaparsanız genişler ve sonra kaydırma çubuklarını uyguladım.