100% hög div

5 svar · 307 visningar · startad av andreas_lindh 4 jan. 2003

andreas_lindhMedlem sedan jan. 20011 140 inlägg

Trådstart4 jan. 2003 17:34#1

Jag har en div som är 100% hög. Det fungerar bra i Ie men inte i mozilla. Går det att lösa och i så fall hur?

<div class="meny"> 
	<span class="logga">
		<asp:image ImageUrl="alcup_logga.jpg" AlternateText="Logga" runat="server" />
	</span>
	<span class="valdmeny">
		Startsidan
	</span>
	<span class="ovaldmeny">
		Cuper
	</span>
	<span class="ovaldmeny">
		Matcher
	</span>
	<span class="ovaldmeny">
		Spelare
	</span>
	<span class="ovaldmeny">
		Övrigt
	</span>
	<span class="ovaldmeny">
		Logga Ut
	</span>
</div>

css-klasserna

.meny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	width:200px;
	height:100%;
	float:left;
	margin:0px;
}
.ovaldmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	width:200px;
	height:12px;
	float:left;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
.logga {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	width:200px;
	height:80px;
	float:left;
	margin:0px;
	padding:1px;
}
.valdmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	width:200px;
	height:12px;
	float:left;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:100%;
	margin:0px;
}

Peter SMedlem sedan dec. 20025 483 inlägg

4 jan. 2003 19:25#2

I Mozilla 1.2.1 (och även Opera 7) fungerar det för mig. Däremot blir alla span-element bredare än själva div-elementet, eftersom du har angett "padding:4px" (gäller även Opera 7).

jarvkloMedlem sedan juli 20013 378 inlägg

4 jan. 2003 23:27#3

När du anger height:100% på ett block (t.ex. en <div>) så får du den att bli 100% av det block den ligger i.

Om det block den ligger i är <body bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000"> och du har satt 100% höjd även på den, så skall detta (enligt CSS2 som Mozilla följer slaviskt i detta fall) motsvara 100% av webbläsarfönstrets höjd.

Tyvärr så är den gängse tolkningen av detta (som även Moz anammar) att det skall vara 100% av webbläsarfönstrets höjd även när innehållet i <div>:en är större än webbläsarens höjd...
Vilket bl.a. får till följd att t.ex. bakgrunder och ramar (borders) anpassas i det fallet till webbläsarfönstrets höjd och inte till <div>:ens verkliga höjd som man kanske egentligen skulle vilja ha det...

För att ytterligare komplicera det hela så beter sig *samtliga* nämnda webbläsare (NN, Moz och Opera) olika i hur den hanterar höjder, bredder, marginaler, paddings och relativa bredder beroende på vilken <!DOCTYPE du använder... (vilket kan vara en förklaring till <span>-fenomenet som Peter S rapporterar om ovan)...

Dvs det finns skillnader i t.ex. MSIE hur den hanterar höjd och bredd på block beroende på om den lägger sig i "quirks" eller "standards" mode...

PS.
Du kan ibland behöva sätta höjd till 100% även på <html>-taggen

Peter SMedlem sedan dec. 20025 483 inlägg

5 jan. 2003 10:19#4

När det gäller <span>-problemet kan du enkelt åtgärda det genom att ange

max-width:192px;

...i klasserna: logga, ovaldmeny och valdmeny. Det fungerar även med att ange ett tal som är lägre än 192.

Annars kan du ersätta alla <span>-element med <div>-element och ta bort "float:left" samt "width:200px" på de ovan nämnda klasserna. Resultatet blir då identiskt i såväl IE6, Mozilla 1.2.1 och Opera 7.

Den fullständiga koden skulle då se ut så här:

<style type="text/css">
.meny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	width:200px;
	height:100%;
	float:left;
	margin:0px;
	max-width:200px;
}
.ovaldmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	height:12px;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
.logga {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	height:80px;
	margin:0px;
	padding:1px;
}
.valdmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:12px;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:100%;
	margin:0px;
}

</style>

<div class="meny"> 
	<div class="logga">
		<asp:image ImageUrl="alcup_logga.jpg" AlternateText="Logga" runat="server" />
	</div>
	<div class="valdmeny">
		Startsidan
	</div>
	<div class="ovaldmeny">
		Cuper
	</div>
	<div class="ovaldmeny">
		Matcher
	</div>
	<div class="ovaldmeny">
		Spelare
	</div>
	<div class="ovaldmeny">
		Övrigt
	</div>
	<div class="ovaldmeny">
		Logga Ut
	</div>
</div>

andreas_lindhMedlem sedan jan. 20011 140 inlägg

5 jan. 2003 10:58#5

Tack för svaren. Tänkte inte på det där med paddingen

Jag använder den här doctypen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Peter SMedlem sedan dec. 20025 483 inlägg

5 jan. 2003 11:09#6

Höjproblemet i Mozilla fixar du genom att skriva följande:

[B]html[/B], body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:100%;
	margin:0px;
}

Sedan uppstår det ett marginalproblem i Opera 7, vilket du kan lösa genom att lägga till "padding:0px;" i den ovanstående koden.

Fullständig kod:

<style type="text/css">
.meny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	width:200px;
	height:100%;
	float:left;
	margin:0px;
}
.ovaldmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	height:12px;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
.logga {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #FFFFFF;
	height:80px;
	margin:0px;
	padding:1px;
}
.valdmeny {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:12px;
	margin:0px;
	padding:4px;
	font-weight:bold;
}
html, body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none;
	background-color: #999999;
	height:100%;
	margin:0px;
	padding:0px;
}
</style>

<div class="meny"> 
	<div class="logga">
		<asp:image ImageUrl="alcup_logga.jpg" AlternateText="Logga" runat="server" />
	</div>
	<div class="valdmeny">
		Startsidan
	</div>
	<div class="ovaldmeny">
		Cuper
	</div>
	<div class="ovaldmeny">
		Matcher
	</div>
	<div class="ovaldmeny">
		Spelare
	</div>
	<div class="ovaldmeny">
		Övrigt
	</div>
	<div class="ovaldmeny">
		Logga Ut
	</div>
</div>