Dirbu su žiniatinklio programa, kurioje noriu, kad turinys užpildytų viso ekrano aukštį.
Puslapyje yra antraštė, kurioje yra logotipas ir sąskaitos informacija. Ji gali būti bet kokio aukščio. Noriu, kad turinio divas užpildytų likusią puslapio dalį iki pat apačios.
Turiu antraštės div
ir turinio div
. Šiuo metu išdėstymui naudoju lentelę, pvz:
CSS ir 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>
Užpildomas visas puslapio aukštis ir nereikia slinkti.
Bet kam, kas yra turinio divo viduje, nustatant top: 0;
jis atsidurs tiesiai po antraštėmis. Kartais turinys bus tikra lentelė, kurios aukštis nustatytas 100 %. Įdėjus header
į content
, tai neveiks.
Ar yra būdas pasiekti tą patį efektą nenaudojant table
?
Atnaujinta:
Elementams, esantiems turinio div
viduje, aukštis taip pat bus nustatytas procentais. Taigi 100 % dydžio elementas, esantis div
viduje, užpildys jį iki pat apačios. Kaip ir du elementai, kurių dydis yra 50 %.
Atnaujinimas 2:
Pavyzdžiui, jei antraštė užima 20 % ekrano aukščio, lentelė, nurodyta 50 % intervale #content
, užims 40 % ekrano erdvės. Kol kas vienintelis veikiantis dalykas yra viso objekto įvilkimas į lentelę.
Tikrai nėra tinkamo, įvairioms naršyklėms tinkamo būdo, kaip tai padaryti naudojant CSS. Jei jūsų išdėstymas yra sudėtingas, elemento aukščiui nustatyti reikia naudoti "JavaScript". Tai, ką jums reikia daryti, iš esmės yra:
Element Height = Viewport height - element.offset.top - desired bottom margin
Kai galėsite gauti šią reikšmę ir nustatyti elemento's aukštį, reikia pridėti įvykių tvarkykles prie langų onload ir onresize, kad galėtumėte paleisti savo dydžio keitimo funkciją.
Be to, darant prielaidą, kad jūsų turinys gali būti didesnis už rodinio sritį, jums reikės nustatyti overflow-y slinkti.
<!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>
Visose sveiko proto naršyklėse galite įdėti "header" div prieš turinį, kaip giminingą divą, ir veiks tas pats CSS. Tačiau IE7- tokiu atveju neteisingai interpretuoja aukštį, jei float yra 100 %, todėl antraštė turi būti turinyje, kaip nurodyta pirmiau. Dėl overflow: auto IE (kuriame peržiūros juostos slinkties juosta visada matoma, bet išjungta) atsiras dvigubos slinkties juostos, tačiau be jos turinys bus apkarpytas, jei bus perpildytas.
Jei vienintelė problema yra aukštis, atrodo, kad pakanka naudoti divus:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
Atlikus paprastą bandymą, antraštės ir turinio plotis skiriasi jūsų ir mano pavyzdyje, bet iš jūsų pranešimo nesu tikras, ar jums rūpi plotis?