Bir div kalan ekran alanı yüksekliği dolgu yapmak
Şu anda içerik tüm ekran yüksekliği doldurmak istiyorum nerede bir web uygulaması üzerinde çalışıyorum.
Bu sayfa logosunu içeren bir başlık ve hesap bilgileri vardır. Bu keyfi bir yükseklik olabilir. İçerik div en alta sayfanın geri kalanını doldurmak istiyorum.
Bir başlığı div
içerik div
var. Şu anda öyle gibi: düzeni için bir tablo kullanıyorum
CSS ve HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
Bu sayfa tüm yükseklik dolu ve hiçbir kaydırma gereklidir.
İçerik div içinde bir şey için, top: 0;
ayarı doğru başlık altına koyacağız. Bazen içeriği gerçek bir tablo, yüksekliği 0 olarak ayarlanmış olacak. content
içinde header
koyarak bu işe izin vermez.
Bir şekilde table
kullanmadan aynı sonucu elde etmek için var mı?
Güncelleme:
İçerik div
içindeki unsurlar Yükseklikleri de yüzdeleri ayarlamak zorunda kalacak. Yani div
içinde 0 bir şey sonuna kadar dolduracaktır. 50% iki unsur olacak.
Güncelleme 2:
Başlığın Yukarı ekran yüksekliğinin 'sini alır örneğin, eğer, bir masa #content
içinde P'de belirtilen ekran alanının @'ı kadar götürecek. Şimdiye kadar, bir tablodaki tüm şey sarma işe yarayan tek şey.
CEVAP
Gerçekten CSS bunun için çapraz tarayıcı ses bir yolu yok. Düzeni karmaşıklığı vardır varsayarak, JavaScript elemanın yüksekliği ayarlamak için kullanmanız gerekir. Yapman gereken şey özü:
Element Height = Viewport height - element.offset.top - desired bottom margin
Bu değeri elde elemanın yüksekliğini ayarlayabilirsiniz bir kez, yeniden boyutlandırma işlevi ateş, böylece her iki pencere yüklendiğinde ve onresize olay işleyicileri eklemek gerekir.
Ayrıca, içeriğinizi görünüm penceresi daha büyük olabilir varsayarak, taşma-y ayarlamak için kaydırma gerekir.
Nasıl ınline-block element bir satırın...
Ekransız-yüksekliği sabit giriş alanı ...
Nasıl varsayılan olarak phpstorm ekran...
YouTube ve Haritalar gibi bir http etk...
Nasıl bir div kalan Yatay Boşluk (CSS ...