jeg fik selv denne kode i et indlæg - det er ret genialt, da man ikke kender sidefod's placering før siden er optegnet, så der er indlagt en kort pause.
Denne kode er ydermere så genial, at den (når der er plads i bredden) kører i 3 kolonner, og ellers går ned på enkelt kolonne.
Det er koden til enkelt-kolonne, som du står og mangler.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=ISO-8859-1">
<META HTTP-EQUIV="Content-language" CONTENT="dan">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<title>HTML</title>
<style type="text/css">
html {width:100%;height:100%;}
body {width:100%;height:100%; margin:0; padding:0; overflow:auto;}
</style>
<script>
window.onresize=function(){reFit()}
function reFit()
{
if (document.body.clientWidth > 899)
{
document.getElementById("bl").style.position = "absolute"
document.getElementById("bl").style.width = "300px"
document.getElementById("bl").style.height = ""
document.getElementById("bl").style.minHeight = "100%"
document.getElementById("bc").style.position = "absolute"
document.getElementById("bc").style.left = "300px"
document.getElementById("bc").style.right = "300px"
document.getElementById("bc").style.width = ""
document.getElementById("bc").style.height = ""
document.getElementById("bc").style.minHeight = "100%"
document.getElementById("br").style.position = "absolute"
document.getElementById("br").style.right = "0px"
document.getElementById("br").style.width = "300px"
document.getElementById("br").style.height = ""
document.getElementById("br").style.minHeight = "100%"
var h = Math.max(document.getElementById("bl").offsetHeight
,document.getElementById("bc").offsetHeight
,document.getElementById("br").offsetHeight)
document.getElementById("bl").style.height = h+"px"
document.getElementById("bc").style.height = h+"px"
document.getElementById("br").style.height = h+"px"
}
else
{
document.getElementById("bl").style.position = "static"
document.getElementById("bl").style.width = "100%"
document.getElementById("bl").style.minHeight = ""
document.getElementById("bl").style.height = ""
document.getElementById("bc").style.position = "static"
document.getElementById("bc").style.width = "100%"
document.getElementById("bc").style.minHeight = ""
document.getElementById("bc").style.height = ""
document.getElementById("br").style.position = "static"
document.getElementById("br").style.width = "100%"
document.getElementById("br").style.minHeight = ""
document.getElementById("br").style.height = ""
setTimeout(function() // kender ikke footer/headers offsetHeight før rendering, vent 10 tix
{
var h = document.body.clientHeight
- document.getElementById("bl").offsetHeight
- document.getElementById("br").offsetHeight
if (h > 0)
document.getElementById("bc").style.minHeight = h+"px"
}
,10)
}
}
</script>
</head>
<body onload="reFit();document.getElementById('splash').style.display='none'" bgcolor="#000000">
<div id="splash" style="position:fixed; top:0px;left:0px;right:0px;bottom:0px; z-index:2; background-color:#FEB;">
Liige et øjeblik...
</div>
<div id="bl" style="background-color:#6C6; position:absolute; left: 0px; top:0px; text-align:center;">
Venstre eller header
</div>
<div id="bc" style="background-color:#FEB; position:absolute; left: 0px; top:0px; text-align:center;">
Midt
<table border="3" height="400px" width="200px" align="center"><tr><td>fyld</td></tr></table>
</div>
<div id="br" style="background-color:#C66; position:absolute; right:0px; top:0px; text-align:center;">
Højre<br>eller<br>footer
</div>
</body>
</html>