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
277 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
