min-height:100%(-80px)?

6 svar · 509 visningar · startad av UrMe 7 sep. 2007

UrMeMedlem sedan apr. 2001762 inlägg

Frågan7 sep. 2007 09:12#1

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

10 sep. 2007 08:08#2

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

10 sep. 2007 09:22#3

Är det här samma som http://www.webforum.nu/showthread.php?t=160638 kanske?

UrMeMedlem sedan apr. 2001762 inlägg

10 sep. 2007 11:27#4

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

10 sep. 2007 18:57#5

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

12 sep. 2007 18:56#6

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

17 sep. 2007 07:55#7

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 :)