CSS: Kaydırma ile% 100 genişletmek için bu yer paylaşımı nasıl alınır?

İşte

söz konusu sorunun bir örnektir:CSS: Kaydırma ile% 100 genişletmek için bu yer paylaşımı nasıl alınır?

http://dev.madebysabotage.com/playground/overlay.html

Sen tüm sayfa üzerinden gri kaplama var bakın, ama biraz daha aşağı eğer, ilk yüklenen sayfanın altında içerik bulunmamaktadır bindirme.

#overlay div'um var ve kaydırma sırasında% 100 yüksekliğini koruduğu görülüyor, bu yüzden nasıl çekileceğini anlamaya çalışıyorsunuz.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <title>CSS Overlay</title> 
    <style type="text/css"> 
    html { 
     height: 100%; 
     min-height: 100%; 
    } 
    body { 
     height: 100%; 
     min-height: 100%; 
     font-family: Georgia, sans-serif; 
    } 
    #overlay { 
     background: rgba(0,0,0,0.4); 
     width: 100%; 
     height: 100%; 
     min-height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: 10000; 
    } 
    header, section, footer { 
     width: 800px; 
     margin: 0 auto 20px auto; 
     padding: 20px; 
     background: #ff0; 
    } 
    section { 
     min-height: 1500px; 
    } 
    </style> 
</head> 

<body> 
    <div id="overlay"></div> 
    <header> 
    <h1>Header</h1> 
    </header> 
    <section> 
    <p>Here's some sweet content</p> 
    </section> 
    <footer> 
    <p>Here's my footer</p> 
    </footer> 
</body> 
</html>

kaynak

2011-01-10 Shpigford

Bunun için teşekkürler! Okuma yapan herkes için sorun, yukarıdaki bağlantıda giderilmiştir. Yeniden oluşturmak için Firebug veya benzeri kaldırmak için 'konum: sabit' 'overlay id :) – RyanM

3yrs sonra ve aynı sorun var :) soru – Ljubisa

131

position: fixed; paylaşımını:

İşte tam kaynağıdır. #overlayposition: absolute<html> görelidir ve sadece görünüm alanı yüksekliği olan boyutlar var kullanarak çünkü

kaynak

2011-01-10 15:36:29 benhowdle89

için +1 utanç verici, basit hatalar bazen görmek bazen saat alıyor! ! – benhowdle89

IE6'da sabit konumların desteklenmediğini unutmayın. Ama rgba değerlerini kullandığınız düşünülürse, sanırım IE'yi hiç umursamıyorsunuz. : p – Dan

kim yapar? ;) (hepimiz gerçekten olmalıyız) ha – benhowdle89

Değişim #overlayposition:absolute

kaynak

2011-01-10 15:37:32 Bazzz

position:fixed için bu gerçekleşir.

Eğer <body> üzerinde position: relative; kullanabilirsiniz, #overlay bütün sayfanın boyutlarını kullandığından emin olmak için (ama bu o görünüm alanı boyutunu kullanmak yapar çünkü <body> ilk on min-height: 100% ve height: 100% kaldırmak gerekir). #overlay, <body> boyutlarını kullanacak ve tüm sayfayı dolduracaktır.

kaynak

2015-10-14 14:09:57 Thom

CSS: Kaydırma ile% 100 genişletmek için bu yer paylaşımı nasıl alınır?

cevap

İlgili konular