Problem med div/height/scroll ?

5 svar · 403 visningar · startad av wmaster 6 dec. 2006

wmasterMedlem sedan dec. 2001349 inlägg

Frågan6 dec. 2006 02:15#1

Hej, håller på att snickra ihop en sida och har fastnat på något som känns rätt basic men jag får det inte att fungera...

Ta en titt på följande TESTSIDA.
Jag har alltså en huvuddiv som ska ha 100% höjd, dvs täcka hela ytan i höjdled i browsern. Vidare ska denna div innehålla två kolumner. Notera nu vad som händer om du inte kör webbläsaren i fullskärm utan minimerar fönstret något så att du får en vertikal scroll (om du inte redan har det). När du scrollar ner på sidan får man en yta (nere till vänster) som är blå och något fult "hack" i mitten.

Jag vill alltså dessa kolumner alltid ska ha 100% height mot en vit bakgrund i alla lägen, även när jag scrollar/resizar fönstret osv, men jag lyckas inte få till det! :o

Någon vänlig själ som har bra koll, ta en titt!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<link rel="stylesheet" type="text/css" href="styles/main.css" />
</head>
<body>
	<div class="wrap">
		<div class="main_left">
			asdömasd
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			agn
		</div>
		<div class="main_right">
			Text
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			Mer text
		</div>		
	</div>
</body>
</html>

CSS-kod:

	html, body {
		height:100%;
		margin: 0 auto;
	    margin-left: 20px;
		background-color: #1CA5D8;
		font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #666666;
		}

	.wrap {
		min-height: 100%;
		margin: 0px;
		padding: 0px;
		width: 450px;
		text-align: center;
		background-color: #FFFFFF;
	}

	.main_left {
		width: 220px;
		float: left;
		text-align: left;
		height: 100%;
		background-color: #FFFFFF;
	}

	.main_right {
		width: 200px;
		float: right;
		text-align: left;
		height: 100%;
		background-color: #FFFFFF;
	}

Web-TorMedlem sedan nov. 200013 890 inlägg

6 dec. 2006 08:15#2

Jag kommer inte åt din testsidan men när jag kör din kod (IE 6) så ser jag inte något blått hack?

jarvkloMedlem sedan juli 20013 378 inlägg

6 dec. 2006 09:02#3

Hmm...

Det där är en klassiker (dvs du är inte ensam om att ha stött på problemet :) )

Det som händer är att dina båda "floats" (kolumnerna) lägger sig utanför/ovanför sin "container" (wrapper) och att containern inte riktigt hänger med på att du vill att den skall utöka sig nedåt den också...

En lösning på problemet (finns flera varianter! - Googla på "clearing floats" ;) ) beskrivs ingående här: http://www.quirksmode.org/css/clearing.html

och i ditt fall skulle det kunna bli såhär:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
	<title>Test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
	html, body {
		height:100%;
		margin: 0 auto;
	    margin-left: 20px;
		background-color: #1CA5D8;
		font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
		color: #666666;
		}

	.wrap {
		min-height: 100%;
		margin: 0px;
		padding: 0px;
		width: 450px;
		text-align: center;
		background-color: #FFFFFF;
		overflow: auto;
	}

	.main_left {
		width: 220px;
		float: left;
		text-align: left;
	}

	.main_right {
		width: 200px;
		float: right;
		text-align: left;
	}</style>
</head>
<body>
	<div class="wrap">
		<div class="main_left">
			asdömasd
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			agn
		</div>
		<div class="main_right">
			Text
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br />
			Mer text
		</div>		
	</div>
</body>
</html>

Testa: http://member.webforum.nu/2241/blabjornsexemplet.html

wmasterMedlem sedan dec. 2001349 inlägg

6 dec. 2006 15:13#4

Web-tor, du kommer inte åt sidan när du kör IE6 då det är en IDN-domän. :/
jarvklo: klockrent!

wmasterMedlem sedan dec. 2001349 inlägg

6 dec. 2006 15:21#5

Dock läggs det till en scroll när man testar sidan i IE7 hm..

Edit: Det löste sig :i

jarvkloMedlem sedan juli 20013 378 inlägg

6 dec. 2006 15:29#6

wmaster skrev:

Dock läggs det till en scroll när man testar sidan i IE7 hm..

Hmm - Det gör det inte hos mig...
Jag kör IE7 Build 7.0.5730.11 på en nyinstallerad XP Professional.

Har för mig att det strulade med 100%-höjder i någon av betorna dock...

...
Vänta lite
...

Jo så var det - men det verkar vara löst nu - rullningslistproblemet som rapporteras i http://www.webforum.nu/showthread.php?t=147457 dyker i varje fall inte på ovanstående konfiguration...

Du kör inte möjligen på en IE7-beta ?

//red: Såg inte att du löst problemet :)