İçeriğin tüm ekranın yüksekliğini doldurmasını istediğim bir web uygulaması üzerinde çalışıyorum.
Sayfada logo ve hesap bilgilerini içeren bir başlık bulunur. Bu rastgele bir yükseklik olabilir. İçerik div'inin sayfanın geri kalanını en alta kadar doldurmasını istiyorum.
Bir başlık div
im ve bir içerik div
im var. Şu anda düzen için aşağıdaki gibi 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>
Sayfanın tüm yüksekliği doldurulur ve kaydırma gerekmez.
İçerik div'i içindeki herhangi bir şey için top: 0;
ayarı onu başlığın hemen altına yerleştirecektir. Bazen içerik, yüksekliği %100 olarak ayarlanmış gerçek bir tablo olacaktır. Başlıkı
content` içine koymak bunun çalışmasına izin vermeyecektir.
Aynı etkiyi table
kullanmadan elde etmenin bir yolu var mı?
Güncelleme:
diviçeriğinin içindeki öğelerin yükseklikleri de yüzde olarak ayarlanacaktır. Yani
div` içinde %100 olan bir şey onu dibine kadar dolduracaktır. 50'lik iki öğe de öyle.
Güncelleme 2:
Örneğin, başlık ekran yüksekliğinin %20'sini kaplıyorsa, #content
içinde %50 olarak belirtilen bir tablo ekran alanının %40'ını kaplayacaktır. Şimdiye kadar, her şeyi bir tabloya sarmak işe yarayan tek şey.
CSS'de bunu yapmanın gerçekten sağlam, tarayıcılar arası bir yolu yoktur. Düzeninizin karmaşık olduğunu varsayarsak, öğenin yüksekliğini ayarlamak için JavaScript kullanmanız gerekir. Yapmanız gereken şeyin özü şudur:
Element Height = Viewport height - element.offset.top - desired bottom margin
Bu değeri aldıktan ve öğenin yüksekliğini ayarladıktan sonra, yeniden boyutlandırma işlevinizi çalıştırabilmek için hem pencere onload hem de onresize olay işleyicilerini eklemeniz gerekir.
Ayrıca, içeriğinizin görüntü alanından daha büyük olabileceğini varsayarsak, taşma-y değerini kaydırma olarak ayarlamanız gerekir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
Tüm aklı başında tarayıcılarda, "header" div'ini içerikten önce bir kardeş olarak koyabilirsiniz ve aynı CSS çalışacaktır. Ancak, IE7- bu durumda float %100 ise yüksekliği doğru yorumlamaz, bu nedenle başlığın yukarıdaki gibi içeriğin İÇİNDE olması gerekir. Taşma: otomatik IE'de çift kaydırma çubuğuna neden olur (görünüm alanı kaydırma çubuğu her zaman görünür ancak devre dışıdır), ancak bu olmadan, taşarsa içerik kırpılır.
Tek sorun yükseklikse, sadece div kullanmak işe yarıyor gibi görünüyor:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
Basit bir testte, başlık/içerik genişliği sizin örneğinizde ve benimkinde farklıdır, ancak yazınızdan genişlik konusunda endişeli olup olmadığınızdan emin değilim?