UrMeMedlem sedan apr. 2001762 inlägg Ett återkommande problem är ju 100% höjd på en div i CSS, mitt problem är att jag har en Div ovanför en div som ska vara 100% av resten av sidan. 100%-80px egentligen.
Jag har lagt upp ett exempel här: http://www.urme.com/layouttest/
Det är "column left" som jag vill ha 100%, det är den ju nu, fast den går ju ner för långt eftersom "header" ligger högst upp och trycker ner "column left" 80px.
Fungerar i IE6 men inte IE7 och Firefox.
stylesheet.css
html {
height:100%;
}
body {
height:100%;
border:1px solid #F0F;
margin:0;
}
#container {
width:904px;
margin:0 auto;
text-align:left;
padding:0;
border:1px solid #0000FF;
height:100%;
}
#header {
height:79px;
border:1px solid #FF00FF;
}
#column_left {
float:left;
width:309px;
padding:0 0 0 0;
margin:0 0 0 0;
border:1px dotted #00FF00;
min-height:100%;
}
/* for IE */
* html #column_left {
height: 100%;
}
#content_center {
float:left;
width:563px;
padding:0 0 0 15px;
}
html kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>layouttest</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="header">
header
</div>
<div id="column_left">
column left
</div>
<div id="content_center">center</div>
</div>
</body>
</html>
UrMeMedlem sedan apr. 2001762 inlägg Ingen som har en idé om hur detta ska gå att lösa? Är inte snyggt att ha en 80 pixlar scroll när det inte behövs :(
zcorpanMedlem sedan dec. 20042 245 inlägg UrMeMedlem sedan apr. 2001762 inlägg Nej tyvärr det är inte samma.. här ska hela diven gå hela vägen ner, den ska inte bara ligga längst ner.
XogedeMedlem sedan sep. 20072 inlägg För mig fungerar inte exemplet i IE6 heller.
I FF och Safari är detta iaf ganska enkelt att göra:
Ta bort alla height och width, sätt position:absolute, och ange storleken och position med top, right, left och bottom. Detta ska fungera enligt CSS2 (http://www.w3.org/TR/CSS2/visuren.html#propdef-position) (om jag minns rätt, även enligt M$/M$DN), men gör det inte i varken IE6 eller 7 (inte Opera heller, om minnet inte sviker mig). På M$DN-forumet verkar de inte heller ha något bra svar på den frågan (http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=2100534&SiteID=1).
Så vänta på IE8 eller använd tabeller är mitt tips.
jarvkloMedlem sedan juli 20013 378 inlägg Hmm...
Eftersom du använder fasta kolumn- och sidbredder, ser det där ut som ett klassiskt upplägg för "faux columns" (dvs att simulera höjden med en bakgrundsbild på containern).
Tar du bort sidforsmeket ur http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html så har du principen även där (headern ligger "ovanpå" faux-columns-bilden i containern)...
... men hur skall det *egentligen* se ut grafiskt ? är det där med "dotted border" något du vill ha med i din design eller är den med bara för att markera var kolumnen hamnar ?
UrMeMedlem sedan apr. 2001762 inlägg Tack Jarvklo! Jag löste det med en bakgrund i containern, problemet jag hade var att i den vänstra kolumnen ska det vara en bild i bottom, fast då satt jag en sidfot över hela sidan istället som är 118 pixlar hög, problemet blir ju att man inte kan ha något i "main" till höger om den bilden nu efter den ligger i sidfoten. Men så får det vara!
Det som bökade till det ännu mer är att jag gjorde om en OScommerce butik som var gjord helt i tabeller.
Tack :)
