100% höjd och bredd

6 svar · 588 visningar · startad av Dryden 8 jan. 2004

DrydenMedlem sedan aug. 200218 625 inlägg

8 jan. 2004 14:01#1

Har lite problem med en CSS. Jag vill ha 100% höjd och bredd i webbläsarfönstret på en tabell och har följande i min CSS:

BODY {
	height: 100%; 
	width: 100%; 
	margin-top: 0px; 
	margin-left: 0px; 
	margin-right; 0px; 
	margin-bottom; 0px; }

.table {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	vertical-align: top;
	height: 100%;
	width: 100%; }

Får det dock inte att fungera. Både i Firebird 0.7 och IE6 så blir det marginaler på högersida och i botten av sidan.

Någon?

dectgapMedlem sedan sep. 20021 655 inlägg

8 jan. 2004 14:31#2

Hjälper det om du lägger till HTML i BODY-selektorn?

HTML, BODY {
	height: 100%; 
	width: 100%; 
	margin-top: 0px; 
	margin-left: 0px; 
	margin-right; 0px; 
	margin-bottom; 0px; }

DrydenMedlem sedan aug. 200218 625 inlägg

8 jan. 2004 15:15#3

Ja, det fungerar nästan fullt ut i Firebird så när som på en ynka rad på 1px i botten av sidan. I högermarginalen fungerar det klockrent. Däremot går IE bet helt och hållet.

CheguelinMedlem sedan juli 2003303 inlägg

8 jan. 2004 15:40#4

Du behöver inte skriva enhet om något är noll; noll är noll vilken enhet man än använder. Det är även onödigt att skriva alla sorters margin, eftersom allt är noll kan du kort och gott skriva "margin: 0;", annars kan man skriva enligt margin: top, right, bottom, left;, t ex margin: 25px, 15px, 0, 10px;. Angående ditt problem så tror jag att det ska gå att funka om du sätter padding: 0;.

dectgapMedlem sedan sep. 20021 655 inlägg

8 jan. 2004 16:17#5

Cheguelin skrev:

Angående ditt problem så tror jag att det ska gå att funka om du sätter padding: 0;.

Varken IE eller Mozilla har någon standard-padding på <html> eller <body>, men däremot har Opera det. Så om man vill att sidan ska visas rätt i Opera gör man klokt i att även sätta padding till 0.

När jag skriver följande har jag inga problem:

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

<head>
<title>xxx</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
.tabell { height: 100%; width: 100%; background: #ccc; }
</style>
</head>

<body>

<table class="tabell">
  <tr>
    <td>Grå bakgrund för att synas</td>
  </tr>
</table>

</body>

</html>

CheguelinMedlem sedan juli 2003303 inlägg

8 jan. 2004 16:46#6

Ah, just ja. Det är Opera som störar med padding, my bad.

DrydenMedlem sedan aug. 200218 625 inlägg

8 jan. 2004 17:08#7

Jag själv skrev:

Ja, det fungerar nästan fullt ut i Firebird så när som på en ynka rad på 1px i botten av sidan.

Glöm att jag skrev det där. Det var XP som lurade mig. Jag misstänkte vart felet kunde ligga och mycket riktigt - ändrade jag till utseendet Windows Klassiskt så försvann den raden. :OO

Nu fungerar det klockrent i både Firebird och IE, plus att jag optimerat CSS:en en aning. Tack båda två! :)

Så här ser CSS:en ut när det fungerar:

HTML, BODY {
	height: 100%; 
	width: 100%; 
	margin: 0px; 
	padding: 0px;
}

.table {
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;

}