SELFHTML Forum
SELFHTML Forumsarchiv
2007
Mai
 |
SELFHTML Forumsarchiv |
 |
|
 |
|
Die folgende Nachricht zum Thema stammt von: Kevin, 31. 05. 2007, 16:54
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.
Die folgende Nachricht zum Thema stammt von: wahsaga, 31. 05. 2007, 17:01
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; }
Die folgende Nachricht zum Thema stammt von: Kevin, 31. 05. 2007, 17:12
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.
Die folgende Nachricht zum Thema stammt von: wahsaga, 31. 05. 2007, 17:25
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 folgende Nachricht zum Thema stammt von: semaphor, 31. 05. 2007, 17:47
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.
© 1998-2006 
Impressum, Software: Classic Forum
(CSS)