2019'da güncelleme
TL; DR: Bugün en iyi seçenek bu cevaptaki son seçenek - flexbox. Her şey güzelce destekliyor ve yıllarca var. Bunun için git ve arkana bakma. Bu cevabın geri kalanı tarihsel nedenlerle kaldı.
İşin püf noktası% 100 neyin alındığını anlamaktır. CSS teknik özelliklerini okumak size yardımcı olabilir.
Uzun bir öykü kısaltmak için - "blok içeren" gibi bir şey vardır - bu da ana öğeye ihtiyaç duymaz. Basitçe söylemek gerekirse, hiyerarşideki konum: göreceli veya konum: mutlak olan ilk öğedir. Ya da başka bir şey yoksa vücut elementinin kendisi. Yani, "width: 100%" dediğinizde, "içeren bloğun" genişliğini kontrol eder ve elemanınızın genişliğini aynı boyuta ayarlar. Orada başka bir şey varsa, o zaman kendisinden daha büyük bir "içeren blok" içeriği alabilirsiniz (böylece "taşan").
Yükseklik aynı şekilde çalışır. Bir istisna dışında. Tarayıcı penceresinin% 100'üne kadar yükseklik elde edemezsiniz. % 100'ünün hesaplanabileceği en üst düzey öğe, gövde (veya html? Emin değilim) öğesidir ve içeriğini içerecek kadar genişler. Yükseklik belirtmek: Üzerinde% 100'ün bir etkisi olmayacaktır, çünkü% 100'ü ölçecek bir "ana öğe" yoktur. Pencerenin kendisi sayılmaz. ;)
Bir şeyin pencerenin tam olarak% 100'ünü uzatmasını sağlamak için iki seçeneğiniz vardır:
- JavaScript kullan
- DOCTYPE kullanmayın. Bu iyi bir uygulama değildir, ancak tarayıcıları "tuhaflık moduna" sokar, burada elemanlar üzerinde height = "% 100" yapabilirsiniz ve bunları pencere boyutuna genişletir. DOCTYPE değişikliklerine uyum sağlamak için sayfanızın geri kalanının da muhtemelen değiştirilmesi gerektiğini unutmayın.
Güncelleme: Bunu gönderdiğimde zaten yanlış olmadığımdan emin değilim, ama bu kesinlikle eski. Bugün bunu stil sayfanızda yapabilirsiniz: html, body { height: 100% }ve aslında görünümünüzün tamamına uzanır. Bir DOCTYPE ile bile.min-height: 100%durumunuza bağlı olarak da yararlı olabilir.
Ve kimseye artık tuhaf modlu bir belge yapmasını tavsiye etmem , çünkü bu onları çözmekten çok daha fazla baş ağrısına neden olur. Her tarayıcının farklı bir gariplik modu vardır, bu nedenle sayfanızın tarayıcılar arasında tutarlı bir şekilde görünmesini sağlamak iki büyüklük sırası daha zor hale gelir. Bir DOCTYPE kullanın. Her zaman. Tercihen HTML5 olanı -<!DOCTYPE html> . Hatırlanması kolaydır ve 10 yaşındakiler de dahil olmak üzere tüm tarayıcılarda bir cazibe gibi çalışır.
Bunun tek istisnası IE5 gibi bir şeyi desteklemeniz gerektiğidir. Oradaysanız, yine de kendi başınızasınız. Bu eski tarayıcılar bugün tarayıcılar gibi bir şey değildir ve burada verilen küçük tavsiyeler size yardımcı olacaktır. Parlak tarafta, oradaysanız, muhtemelen uyumluluk sorunlarından kurtulmak için bir tür tarayıcıyı desteklemeniz gerekir.
İyi şanslar!
Güncelleme 2: Hey, uzun zaman oldu! 6 yıl sonra, yeni seçenekler sahnede. Aşağıdaki yorumlarda bir tartışma yaptım, işte bugünün tarayıcılarında çalışan daha fazla numara.
Seçenek 1 - mutlak konumlandırma. İlk parçanın kesin yüksekliğini bildiğinizde güzel ve temiz.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.first-row {position: absolute;top: 0; left: 0; right: 0; height: 100px; background-color: lime;}
.second-row {position: absolute; top: 100px; left: 0; right: 0; bottom: 0; background-color: red }
.second-row iframe {display: block; width: 100%; height: 100%; border: none;}
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
Bazı notları - second-rowçünkü konteyner gereklidir bottom: 0ve right: 0nedense iframe'lerde üzerinde çalışmaya yapmaz. "Değiştirilmiş" bir öğe olmakla ilgili bir şey. Ama width: 100%ve height: 100%gayet iyi çalışıyor. display: blockgerekli çünkü bu birinlinevarsayılan olarak öğedir ve boşluk aksi halde garip taşmalar oluşturmaya başlar.
Seçenek 2 - tablolar. İlk parçanın yüksekliğini bilmediğinizde çalışır. Gerçek <table>etiketleri kullanabilir veya ile süslü bir şekilde yapabilirsiniz display: table. İkincisi için gideceğim çünkü bu günlerde moda gibi görünüyor.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: table; empty-cells: show; border-collapse: collapse; width: 100%; height: 100%;}
.first-row {display: table-row; overflow: auto; background-color: lime;}
.second-row {display: table-row; height: 100%; background-color: red; overflow: hidden }
.second-row iframe {width: 100%; height: 100%; border: none; margin: 0; padding: 0; display: block;}
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<div class="second-row">
<iframe src="https://jsfiddle.net/about"></iframe>
</div>
</div>
Bazı notlar - overflow: autosatırın her zaman tüm içeriğini içerdiğinden emin olur. Aksi takdirde kayan elemanlar bazen taşabilir. height: 100%İkinci satırda o alır gibi küçük olarak ilk satırı sıkma olabilir olduğu kadar emin genişler yapar.
Seçenek 3 - esnek kutu. En temiz olanı, ancak daha az tarayıcı desteği ile. IE10 -ms-, flexbox özellikleri için öneklere ihtiyaç duyacaktır ve daha az bir şey bunu desteklemeyecektir.
body, html {width: 100%; height: 100%; margin: 0; padding: 0}
.row-container {display: flex; width: 100%; height: 100%; flex-direction: column; background-color: blue; overflow: hidden;}
.first-row {background-color: lime; }
.second-row { flex-grow: 1; border: none; margin: 0; padding: 0; }
<div class="row-container">
<div class="first-row">
<p>Some text</p>
<p>And some more text</p>
</div>
<iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
</div>
Bazı notlar - overflow: hiddeniframe display: blockbu durumda bile hala bir çeşit taşma ürettiği için . Tam ekran görünümünde veya snippet düzenleyicide görünmez, ancak küçük önizleme penceresi fazladan bir kaydırma çubuğu alır. Bunun ne olduğu hakkında hiçbir fikrim yok, iframe'ler tuhaf.