Full høyde med header og footer

Du har laget et sett med nettsider som alle skal ha samme bredde, topp- og bunnelement. Du blar gjennom, og sidene jumper på skjermen. Irriterende. WTF?

Sidebevegelse skyldes, dersom all margin, padding og width er lik, at innholdet ikke fyller ut alle sidene, slik at den vertikale scrollbaren kommer og går. Så for å ta det enkleste først: sett overflow-y:scroll; i body- og/eller html-selektoren i stilarket. Da vil denne heisen være der på alle sider.

Men footeren henger og slenger, og vil ikke til bunns? Nå; vil den ikke, så skal den. CSS har siden innføring av stilark - anført av norske Håkon Wium Lie - hatt et verktøy som banker alt på en nettsige : position:absolute. Det må brukes med varsomhet, spesielt innen responsiv layout, men her er det den eneste løsningen, om man da ikke driver med API.

Stilark og mark-up blir skjematisk slik:

*
	{
	padding:0;
	margin:0;
	border:0;
	}
body, html
	{
	width:100%;
	height:100%;
	background:#cccccc;
	font-family:monospace;
	overflow-y:scroll
	}
#wrap
	{
	width:70%;
	margin:0 auto;
	min-height:100%;
	height:100%;
	position:relative;
	background:white
	}
#header
	{
	width:auto;
	height:2em;
	background:red;
	font-size:1.5em
	}
#content
	{
	width:100%;
	font-size:1em;
	background:white;
	padding:1em 0 2em 0
	}
#footer
	{
	width:100%;
	height:2em;
	margin:0 auto;
	background:blue;
	font-size:1.5em;
	position:absolute;
	bottom:0
	}
h1, h2
	{
	font-size:1.2em;
	text-align:center;
	color:white
	}
p
	{
	padding:0.2em 0;
	margin:0 1em
	}
a
	{
	padding:0.2em 0;
	margin:0 1em
	}

	- - -

<html>
<body>

<h1>HEADER<>h1>

<div id="wrap">

	<div id="header">
<h1>HEADER</h1>
	</div>

	<div id="content">
--- foo ---
	</div>

	<div id="footer">
<h2>FOOTER</h2>
	</div>

</div>

</body>
<html>

Det ligger en DEMO her, frigjort fra tavlas layout, med videre forklaring. Pluss en kuriositet som bonus.

Epilog

Til dette er det benyttet absolutt posisjonering. Det finnes et alternativ, nemlig fiksert posisjon - altså position:fixed - som gjør at bunnelementet ALLTID ligger i viewport, og overskytende innhold kommer fram ved scrolling. For å unngå forvirring, tar jeg ikke med dette her, men henviser til å forske på min gamle private grafiske kontaktside, som jeg har skrellet for uaktuelt og latt ligge for moro skyld. Den bruker slik koding. ... 050225 -khw-

Alltid full høyde med header og footer

Stilark og mark-up blir skjematisk slik:

Epilog