tabelle: height:100% - angezeigt wird aber ~110%
Benjamin
- css
Hi ihr!
Ich finde leider den Fehler nicht: diese tabelle sollte eigentlich laut definition 100% der verfügbaren höhe einnehmen. Sie dehnt sich allerdings (im Firefox) auf ca 110% aus - es wird also ein scrollbalken angezeigt. könnt ihr den fehler entdecken?
das stylesheet:
html,body {
margin-top:5px;
margin-bottom:5px;
text-align:center;
height:100%;
width:100%; }
die html-datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NewVision Consulting - DESIGNENTWURF 2</title>
<link rel="Stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<table style="margin-left:auto; margin-right:auto; width:800px; height:100%; border:1px solid #E4E4E5;"><tr><td style="vertical-align:top;">
<!--Kopfzeile START -->
<table style="width:100%; height:70px;">
<tr>
[...]
</tr>
</table>
<!-- Kopfzeile ENDE -->
<!-- INHALT START --><br>
<table cellspacing="4" cellpadding="0" style="width:624px;" align="center">
<tr style="height:120px;">
[...]
</tr>
<tr>
[...]
</tr>
<tr>
[...]
</tr>
<tr style="height:120px;">
[...]
</tr>
</table>
</td></tr></table>
</body>
</html>
Vielen Dank im Voraus!
Hi,
html,body {
margin-top:5px;
margin-bottom:5px;
height:100%;
Das sind für html schon 10 Pixel mehr als Platz haben, für body kämen die auch nochmal dazu, wenn da nicht zufällig die collapsing margins wären ...
Abhängig von den Browsereinstellungen für padding der Elemente html/body kommen noch mehr dazu.
Also schon mal mindestens 10 Pixel zuviel.
<table style="margin-left:auto; margin-right:auto; width:800px; height:100%; border:1px solid #E4E4E5;"><tr><td style="vertical-align:top;">
und hier kommen auch nochmal mindestens 2 px dazu (abhängig von den Browser-Voreinstellungen für margin/padding für table ggf. noch mehr).
cu,
Andreas
Hallo Benjamin,
Ich finde leider den Fehler nicht: diese tabelle sollte eigentlich laut definition 100% der verfügbaren höhe einnehmen. Sie dehnt sich allerdings (im Firefox) auf ca 110% aus - es wird also ein scrollbalken angezeigt. könnt ihr den fehler entdecken?
Die Tabelle hat laut deiner Definition auch 100 % Höhe. Es kommen aber noch 5 Pixel hinzu, und zwar sowohl oben als auch unten. Ergo ist der Dokumentinhalt 5px + 100% +5px (>100%) hoch. Firefox (und übrigens auch Konqueror unter Linux) machen es also genau richtig.
Hier der Code, den du bestimmt haben wolltest:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>NewVision Consulting - DESIGNENTWURF 2</title>
<style type="text/css">
html,body {
/* margin-top:5px;
margin-bottom:5px; */
margin:0;
text-align:center;
height:100%;
width:100%; }
</style>
</head>
<body>
<table style="margin-left:auto; margin-right:auto; width:800px; height:100%; border:1px solid #E4E4E5;"><tr><td style="vertical-align:top;">
<!--Kopfzeile START -->
<table style="width:100%; height:70px;">
<tr>
[...]
</tr>
</table>
<!-- Kopfzeile ENDE -->
<!-- INHALT START --><br>
<table cellspacing="4" cellpadding="0" style="width:624px;" align="center">
<tr style="height:120px;">
[...]
</tr>
<tr>
[...]
</tr>
<tr>
[...]
</tr>
<tr style="height:120px;">
[...]
</tr>
</table>
</td></tr></table>
</body>
</html>
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
Vielen Dank, auch an Mudguard!
Da lag der Fehler - ich dachte, die margin-abstäne würden gar nicht zu den 100& dazugerechnet werden...
Benjamin
Hallo Benjamin,
ich dachte, die margin-abstäne würden gar nicht zu den 100& dazugerechnet werden...
Siehe CSS-Box-Modell, damit du auch verstehst, warum Marcs Beispiel funktioniert.
Grüße
Roland