webForumDet fria alternativet

CSS height 100% problem

10 svar · 566 visningar · startad av b3rra

b3rraMedlem sedan juli 2004103 inlägg
#1

Mitt problem består i att height:en inte blir 100% på min
<div id="content">

att öka <div id="info"> är inget alternativ då det kommer att ligga fler div:ar somsk ha samma bakgrundsfärg i detta fält.

Som det är nu så blir heighten på <div id="content"> exakt lika högt som fönstret, börjar man scrolla så försvinner bakgrundsfärgen. Konstigt men så fungerar det oavsett skärmupplösning.

Någon som som kan hjälpa mig och gärnaq förklara.

// B3rra

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
	
	<title></title>
	
	 <style type="text/css">
		<!--
		a:link{text-decoration:none;font-size:8pt;color:#000000;font-family:Verdana, sans-serif} 
		a:visited {text-decoration:none;font-size:8pt;color:#000000;font-family:Verdana, sans-serif} 
		a:hover {text-decoration:none;font-size:8pt;color:#b7cfd7;font-family:Verdana, sans-serif} 
		a:active{text-decoration:none;font-size:8pt;color:#b7cfd7;font-family:Verdana, sans-serif} 
		
		li {text-decoration:none;font-size:8pt;color:#666666;font-family:Verdana, sans-serif}
		body {text-decoration:none;font-size:8pt;color:#000000;font-family:Verdana, sans-serif}
		body {background-color:#e0e0e0}
		hr {color:#000000;border-style:dotted;height:1pt;width:250px}
		
		#menyrad {
			position:absolute;
			top:0px;
			left:25px;
			
			width:175px;
			height: 100%;
			background-color: #dde9ec;
			border: #b7cfd7; 
			border-style: solid;
			border-right-width: 1px;
			border-top-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 0px;
			z-index:0;
		}
		#meny
		{
			position:absolute;
			top:140px;
			left:0px;
			padding: 10px;
		
		}
		
		/*Innehåll*/
		#content {
			position:absolute;
			top:0px;
			left:200px;
			background-color: #ffffff;
			width: 550px;
			height: 100%;
			color: #666666;
			z-index:0;
		} 
		#info {
			position:absolute;
			top:195px;
			left:5px;
			padding: 10px;
			width: 340px;
		
			
		} 
		-->
	</style> 
	
</head>
<body>
	
	<div id="left_tbl"></div>
	
	<div id="meny">
		M E N Y
		<br><br>
		<a href="index.php?id=startsida">» Startsida</a><br>
		<br>
		<a href="index.php?id=allmant">» Allmänt</a><br>
		<a href="index.php?id=bilder">» Bilder</a><br>
		<a href="index.php?id=lankar">» Länkar</a><br>
		<a href="index.php?id=kontakt">» Kontakt</a><br>
		<br>
	</div>
		
	
	<div id="content">
		<div id="info">
			Innehåll 
			<br><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et, orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat. Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend, arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum, diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse platea dictumst.
			<br><br>
			Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.
			<br><br>
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean tristique tortor nec neque. Nullam risus turpis, bibendum vitae, dapibus id, tempor et, orci. Etiam sed nunc eu lacus semper interdum. Aenean sollicitudin nunc vel purus pharetra ultrices. Donec molestie ipsum at libero. Praesent euismod pharetra risus. Donec condimentum quam ut quam posuere rutrum. Aliquam erat volutpat. Mauris venenatis massa id lectus. Mauris scelerisque, mi at condimentum eleifend, arcu est iaculis lectus, id porta ipsum turpis at erat. Morbi ac nunc ac erat dapibus mollis. Integer ipsum. Vestibulum egestas, libero eu egestas rutrum, diam ligula commodo purus, eu tincidunt quam eros et tellus. In hac habitasse platea dictumst.
			<br><br>
			Donec diam leo, tristique ac, sodales eu, tristique varius, est. Duis egestas dui non ipsum facilisis commodo. Aliquam erat volutpat. Nullam pede neque, lacinia eu, tincidunt a, mollis malesuada, augue. Quisque ac ligula ut velit porttitor rhoncus. Praesent accumsan sagittis elit. Sed in arcu. Aenean vitae neque sit amet felis dapibus tincidunt. Quisque sodales, neque sed nonummy eleifend, leo est sagittis turpis, ac hendrerit pede mauris at dolor. Donec ut nisl eget dui interdum condimentum. Nam massa quam, porttitor eget, feugiat vel, ullamcorper ac, nibh. Pellentesque elit. Pellentesque consectetuer quam ut orci.
			<br><br>
		</div>
	</div>
	
</body>
</html>
zcorpanMedlem sedan dec. 20042 245 inlägg
#2

Testa min-height.

jarvkloMedlem sedan juli 20013 378 inlägg
#3

Hmm...

När man kör med position:absolute sådär, så "lyfter man upp" det man positionerar ur det normala flödet... Vilket t.ex. är den direkta orsaken till att "det vita" inte hänger med i scroll (texten ligger alltså "ovanför" det vita, inte inuti - vilket gör att den inte kan påverka storleken på det vita ;) )...

Ändra lite i din CSS för #content och #info så att dessa "ligger i det normala flödet" (dvs ta bort position:absolute från dessa )och "positionera" mha lämpliga padding och margin istället så slipper du problemet

#content {
/*		position:absolute;
		top:0px; 
*/
		margin-left:200px;
		padding-top:195px;
		background-color: #ffffff;
		width: 550px;
		height: 100%;
		color: #666666;
		z-index:0;
	} 
#info {
/*		position:absolute;
		top:195px;
*/
		margin-left:5px; 
		padding: 10px;
		width: 340px;

Exemplet är testat i FF och MSIE6 på Win2K och ger, såvitt jag kan se där, likvärdig layout som i ditt exempel ;)...

b3rraMedlem sedan juli 2004103 inlägg
#4

Nu är vi på rätt väg.

Hur gör jag för att få "det vita" till att gå hela vägen högst upp och längst ner, nu är det ju grått typ 15-20 pixlar ovanför den vita rutan....

En som är kass på CSS, tacka vet jag <table> :P

jarvkloMedlem sedan juli 20013 378 inlägg
#5

:e
Hur hade du gjort om du hade haft det problemet och använt tabeller? - Tagit bort defaultindraget som brukar finnas inställt på body antar jag ? ... ;)

Du får helt enkelt göra samma sak här, fast i CSS ;)

body {margin:0;padding:0;}

Kör hårt! - CSS är *egentligen* inte så svårt ;)

... och du är ju på rätt väg som sagt :bire

b3rraMedlem sedan juli 2004103 inlägg
#6

nytt problem

Jag har ju skapat en "kolumn" med vit bakrundsfärg mha
<div id="content">

Nu skulle jag vilja skapa ytterligare en kolumn som ska ha en annan färg och ligga jämte <div id="content">

gör jag en kopia av <div id="content"> och modifierar och flyttar så visas denna rätt. Problemet är att den skjuter ner <div id="content"> så att detta ligger efter denna på sidan om ni förstår hur jag menar.

Vad är felet?
css:en

#left
{
background-color: #000000;
width: 25;
height: 100%;
z-index:0;
}

html koden är inte nestlad utan de ligger på samma nivå, borde inte det gå?

<div id="left">
<div id="content">

Mvh B3rra

echoSweMedlem sedan nov. 20041 189 inlägg
#7

Sätt display: inline på båda, eller sätt float: left på båda, eller sätt float: right på den till höger och sätt de båda i en wrapper, eller float: left; på den vänsta och wrapper etc...

b3rraMedlem sedan juli 2004103 inlägg
#8

Blir inget bra

Jag får inte till det riktigt som jag vill,

nu ligger allting rätt men #left är fortfarande inte 100% den avbryts där browsern är och scrollar man ner så är "columen borta.. hoppas på ett kraktivt förslag.

#left 
		{
			display: inline;
			float: left; 
			background-color: #b7cfd7;
			width: 25;
			height: 100%;
		}
		

		#content 
		{
			display: inline;
			float: left; 
			margin-top:0px;
			margin-left:175px;
			padding-top:195px;
			background-color: #ebf2f3;
			width: 550px;
			height: 100%;
			color: #666666;
			z-index:0;
			
			border: #b7cfd7; 
			border-style: solid;
			border-right-width: 1px;
			border-top-width: 0px;
			border-bottom-width: 0px;
			border-left-width: 1px;
		}
b3rraMedlem sedan juli 2004103 inlägg
#9

Wrapper?

wrapper?
Hur menar du med wrapper, jag får inte ordning på problemet?

Allt utom diven #left ser riktig ut vilket är egendomligt då den i min mening ser exakt lika ut som #content.

Jag har dessutom kommit fram till att #content inte får height 100% om man använder firefox och har ett anpassat browserfönster. (har tryckt på den mellersta knappen i fönstret högst upp till höger. "återställ neråt")

Någon som har någon ide eller kan ge en ledtråd?

// B3rra

jarvkloMedlem sedan juli 20013 378 inlägg
#10

Hmm..

Det där med olika färger på olika kolumner är struligt utan tabeller...

Här är en artikel om ett trix man kan ta till:
http://www.alistapart.com/articles/fauxcolumns/
(den förklarar bl.a. det där med "wrapper" som antyds ovan)

Det där med height:100% och "kapningar" i FireFox beror dels på att 100% höjd är 100% av webbläsarfönstret (dvs man får använda min-height till att få den effekten om man skall följa standard - men eftersom MSIE (felaktigt) hanterar height som om den vore min-height är det lätt att bli förvirrad)

Men det beror också på att man måste sätta height:100% på både body och html mha CSS för att man skall få som man vill om man använder vissa <!DOCTYPE-taggar (dvs de som följer standard) - gör man inte det blir height:100% "bara" lika högt som det "högsta" innehållet - inlägg om detta med exempel: http://www.webforum.nu/showthread.php?s=&postid=650163#post650163 ;)

Här är förresten ett sidexempel jag gjort som ger dig två kolumner, samt sidhuvud och sidfot och även innehåller det där med 100% av webbläsarfönstret: http://member.webforum.nu/2241/bottenfast_sidfot_plus_tvaspalt.html
(OBS - kommentarerna i koden som förklarar det mesta)

b3rraMedlem sedan juli 2004103 inlägg
#11

Man får tacka för hjälpen.

Jag tycker förvisso att CSS sjönk som en sten. Visst blir det enklare att överskåda än en massa tabeller men någon snygg lösning är det ju inte.

Tackar echoswe och jarvklo för hjälpen.

// B3rra

140 ms totalt · 3 externa anrop · v20260731065814-full.2b84b982
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)