Jag har förstått att detta är ett vanligt problem, dock kan jag inte hitta någon lösning.
Jag vill ha en sida med vitt i mitten (där innehållet kommer finnas) och färg på kanterna (utfyllnad). Då tänker jag mig att jag lägger kantfärgen i body och en div i mitten med vitbakgrundsfärg. Problemet är att diven i mitten inte följer med om den inte har något innehåll. Min kod nedan fungerar alltså inte.
<!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">
<title>Min CSS-testlayout</title>
<style type="text/css">
<!--
body {margin:0; height:100%; padding:0; background:#CCCCCC;}
#container {width:800px; height:100%; margin-left:auto; margin-right:auto; background-color:white;}
-->
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
Kan jag överhuvudtaget göra så som jag tänkt eller måste jag tänka om helt?
html,body {height: 100%; margin: 0; padding:0;}
#container {min-height:100%;}
* html #container {height:100%} /* fulhack för äldre MSIE */
Om det inte funkar direkt får du förmodligen peta in lite innehåll i containern för att testa ;)
Ev får du nollsälla topp+bottenmarginal och padding på containern för att just din design skall passa in, men det märker du :)
Länken var riktigt bra, precis så man vill en mall ska se ut. Fråga: Med belowthebottom "skapar du plats" 40px, för att sedan lägga bottom där. Jag testade att ta bort belowthebottom, samt raden margin-top:-40px; i bottom och det fungerade också. Hur kommer det sig att man har den lösningen som du visar i mallen?
Länken var riktigt bra, precis så man vill en mall ska se ut. Fråga: Med belowthebottom "skapar du plats" 40px, för att sedan lägga bottom där. Jag testade att ta bort belowthebottom, samt raden margin-top:-40px; i bottom och det fungerade också. Hur kommer det sig att man har den lösningen som du visar i mallen?
Tack :)
Men får du inte en permanent rullningslist när du gör så pga totalhöjden blir 100% + 40px (så länge #bottom ligger utanför #container)?
Det får jag ;)
Lösningen gjordes, som du säger, sådan att #belowthebottom skall fungera som en "stoppkloss" som skall se till att den expanderande #main inte glider in under #bottom när det "kolliderar" (dvs då innehållet i #main är högre än webbläsarföntsrets höjd).
När exemplet gjordes vågade jag inte lita på att margin-bottom på #main var riktigt "cross browser" så att säga - men det var iofs ett par år sedan så det kanske går att rationalisera ytterligare numera när gamla ök som IE5/Mac nog mest är ett minne blott :)
263 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
