nicht angemeldet
100% Höhe will nicht
Hallo zusammen,
ich möchte eine Seite darstellen, die eine Kopfzeile hat und darunter ein DIV, das den gesamten restlichen Platz den Browserfensters einnimmt. Klingt einfach:
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="height:100%">
<head>
<title>Titel</title>
</head>
<body style="height:100%;margin:0;padding:0;">
<div style="height:100%">
<div>Hier ist die Kopfzeile.</div>
<div style="height:100%;">
Und hier der Inhalt.
</div>
</body>
</html>
(http://www.kevinkempfer.de/test.html)
Funktioniert so leider nicht. Das untere Div ist zwar exakt so hoch wie das Browserfenster - dadurch entsteht aber eine vertikale Scrollleiste, weil die Höhe der Kopfzeile scheinbar nicht berücksichtigt wird und auf die Gesamtlänge addiert wird, sodass beides zusammen doch länger als das Browserfenster ist.
Kann mir jemand den Fehler zeigen? Warum entsteht die Scrollleiste?
Danke,
Kevin.
-
hi,
<body style="height:100%;margin:0;padding:0;">
<div style="height:100%">
<div>Hier ist die Kopfzeile.</div>
<div style="height:100%;">
Und hier der Inhalt.
</div>
</body>Funktioniert so leider nicht. Das untere Div ist zwar exakt so hoch wie das Browserfenster - dadurch entsteht aber eine vertikale Scrollleiste, weil die Höhe der Kopfzeile scheinbar nicht berücksichtigt wird und auf die Gesamtlänge addiert wird, sodass beides zusammen doch länger als das Browserfenster ist.
Works as desigend.
Kann mir jemand den Fehler zeigen?
Dein Fehler muss wohl im Verständnis davon, worauf sich Höhenangaben in Prozent beziehen, liegen - http://www.w3.org/TR/CSS21/visudet.html#the-height-property
Warum entsteht die Scrollleiste?
Weil 100% plus X > 100% ist (für X > 0).
Wenn die Kopfzeile eine bekannte Höhe hat, könntest du sie durch absolute Positionierung aus dem Fluss nehmen - und den ersten Inhalt des Divs dann per margin-/padding-top auf Abstand halten.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Wenn die Kopfzeile eine bekannte Höhe hat, könntest du sie durch absolute Positionierung aus dem Fluss nehmen - und den ersten Inhalt des Divs dann per margin-/padding-top auf Abstand halten.
Genau das ist nicht der Fall - die Höhe der kopfzeile ist variabel.
Grüße,
Kevin.
-
hi,
Genau das ist nicht der Fall - die Höhe der kopfzeile ist variabel.
Dann ist dein Anliegen nicht trivial umsetzbar.
CSS kann (aktuell) keine komplexeren Berechnungen durchführen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Die "sauberere" Lösung wäre dann die Höhe der Flimmerfläche per javascript zu ermitteln und dem Div zuzuweisen.
Eine andere wär's, statt der Divs eine Tabelle für's Layout zu nehmen. ( zwei Zeilen, eine Spalte )
Aber psssssst, sag das bloß nicht laut, weil: verpöhnt. ;)Bist Du überhaupt sicher, daß Du wirklich die gesamte Fläche in einer Box brauchst?
Vielleicht gäb's bessere Alternativen.
Erklär mal am besten, was Du mit der Box dann anstellen willst.
-
-
-