Ş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.

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.