Jeg jobber med en webapplikasjon der jeg vil at innholdet skal fylle hele skjermhøyden.
Siden har en topptekst som inneholder en logo og kontoinformasjon. Dette kan være en vilkårlig høyde. Jeg vil at innholdsdiv-en skal fylle resten av siden til bunnen.
Jeg har en topptekst div
og en innhold div
. For øyeblikket bruker jeg en tabell for oppsettet slik:
CSS og 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>
Hele høyden på siden fylles ut, og det er ikke nødvendig å bla.
For alt som er inne i innholdsdiv, vil innstillingen lt: 0;
vil plassere det rett under overskriften. Noen ganger vil innholdet være en ekte tabell, med høyden satt til 100 %. Å sette header
inne i content
vil ikke la dette fungere.
Finnes det en måte å oppnå samme effekt uten å bruke table
?
Oppdatering:
Elementer inne i innholdet div
vil også ha høyder satt til prosenter. Så noe på 100% inne i div
vil fylle det til bunnen. Det samme vil to elementer på 50 %.
Oppdatering 2:
For eksempel, hvis overskriften tar opp 20% av skjermens høyde, vil en tabell spesifisert til 50% inne i #content
ta opp 40% av skjermplassen. Så langt er innpakning av hele saken i en tabell det eneste som fungerer.
Det finnes egentlig ingen god måte å gjøre dette på i CSS på tvers av nettlesere. Forutsatt at oppsettet ditt har kompleksitet, må du bruke JavaScript for å angi elementets høyde. Essensen av hva du trenger å gjøre er:
Element Height = Viewport height - element.offset.top - desired bottom margin
Når du kan få denne verdien og angi elementets høyde, må du knytte hendelsesbehandlere til både vinduet onload og onresize slik at du kan avfyre størrelsesfunksjonen.
Også, forutsatt at innholdet ditt kan være større enn visningsvinduet, må du angi overflow-y for å bla.
<!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>
I alle tilregnelige nettlesere kan du sette "header" div før innholdet, som et søsken, og den samme CSS vil fungere. IE7- tolker imidlertid ikke høyden riktig hvis float er 100% i det tilfellet, så overskriften må være I innholdet, som ovenfor. Overløpet: auto vil føre til doble rullefelt på IE (som alltid har visningsvinduets rullefelt synlig, men deaktivert), men uten det vil innholdet klippes hvis det renner over.
Hvis det eneste problemet er høyden, ser det ut til å fungere å bare bruke divs:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
I en enkel test er bredden på header / innhold forskjellig i eksemplet ditt og mitt, men jeg er ikke sikker på fra innlegget ditt hvis du er bekymret for bredden?