nicht angemeldet
3 zeiliges Layout
Hi,
ich versuche mich gerade an einem 3 zeiligen Layout.
Die oberen beiden Zeilen sollen eine feste Größe haben, die untere immer bis unten an den Browserrand gehen.
Kann mir da jemand helfen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
#UeberHeader
{
height : 16px;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
border: 1px dashed #009900;
}
#Header
{
height : 179px;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
border: 1px dashed #009900;
}
#Seite
{
min-height : 300px;
height : 100%;
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
border: 1px dashed #009900;
}
-->
</style>
</head>
<body>
<div id="UeberHeader">Fixe Höhe</div>
<div id="Header">Fixe Höhe</div>
<div id="Seite">Hier das soll bis unten hin gehen!</div>
</body>
</html>
Bye, Chris
-
Tach,
<div id="Seite">Hier das soll bis unten hin gehen!</div>
Geht meines Wissens nach nicht mit reinem CSS, sondern nur zusätzlichem mit JavaScript Einsatz. Du müsstest dann herausfinden, wie groß der viewport ist und deinem div die Höhe die sich aus der Viewporthöhe minus der anderen beiden Höhen ergibt. Und das Skript / die Funktion am besten auch beim Browserresizen aufrufen.
Ciao
Phil -
Servus,
positioniere deine Header absolut, und gebe #Seite eine Mindesthöhe von 100% sowie ein margin-top entsprechend der Summe der Höhen beider Header. Vergiss nich die Höhen seiner Elternelemente auch zu definieren, was du in deinem Beispiel offensichtlich vergessen hast.
Ohne absolute Positionierung wirst du mit einem Mix aus Pixelangaben und Prozent Probleme kriegen.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|-
Servus,
und gebe #Seite eine Mindesthöhe von 100% sowie ein margin-top entsprechend der Summe der Höhen beider Header.
Was natürlich auch nicht zum gewünschten Ergebnis führt... (Immer dieser Geburtstagssekt mitten am Tag ;)
Wie wäre es mit einem Container mit Mindesthöhe 100%, in den du deine 3 bereits vorhanden Elemente packst?
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:| -
Tach,
positioniere deine Header absolut, und gebe #Seite eine Mindesthöhe von 100% sowie ein margin-top entsprechend der Summe der Höhen beider Header.
Du meinst, wenn er #Seite eine (min-)height von 100% gibt, erhält er einen Layer der genauso hoch ist wie der Viewport? Das wäre mir neu und das was ich auf die schnelle ausprobiert bestätigt deine Aussage nicht.
Versteh mich nicht falsch, ich wünschte mir das würde gehen und du könntest mir einen Weg zeigen, dass das klappt, aber alle meine bisherigen Experimente so etwas hinzukriegen sind gescheitert. Deshalb bin ich etwas skeptisch.Ciao
Phil-
Servus,
Du meinst, wenn er #Seite eine (min-)height von 100% gibt, erhält er einen Layer der genauso hoch ist wie der Viewport? Das wäre mir neu und das was ich auf die schnelle ausprobiert bestätigt deine Aussage nicht.
Solange dessen Elternelemente auch 100% des Viewports einnehmen ja, nur die Sache mit dem margin macht da einen Strich durch die Rechnung.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:|
-
-