nicht angemeldet
<div>-Block der sich bis Bildschirmunterkante erstreckt
0 
suit
0
<div>-Block der sich bis Bildschirmunterkante erstreckt
Hallo allerseits,
ich denke dieses Problem dürfte altbekannt sein, ich weiß nur nicht wonach ich googeln soll (das wonach ich gegoogelt habe führte zu nichts hilfreichem).
Bsp.: Ich habe einen <div>-Block mit fester und darunter einen zweiten mit variabler Höhe, wobei sich der zweite mindestens bis zur Bildschirmunterkante erstrecken soll, sofern der Inhalt nicht so weit reicht und größer werden soll, sobald der Inhalt über die Unterkante hinausgeht.
<body style="width: 100%; height: 100%;">
<div style="width: 100%; height: 200px;">Oberer div-Block</div>
<div style="width: 100%; height: auto; min-height: 100%;">Unterer div-Block</div>
</body>
Mit min-width: 100% wird der Block jedoch so Hoch wie das <body>-Element und ragt unten aus dem Bildschirm raus, sodass Scrollbalken angezeigt werden.
-
Mit min-width: 100% wird der Block jedoch so Hoch wie das <body>-Element und ragt unten aus dem Bildschirm raus, sodass Scrollbalken angezeigt werden.
min-width beeinflusst die Höhe nicht.
btw: auch body und html können eine min-width oder min-height besitzen.
-
min-width beeinflusst die Höhe nicht.
Da haben die Finger mal wieder was anderes geschrieben als ich gedacht habe. Meinte natürlich min-height (min-height hab ich auch im Beispiel benutzt).
-
-
Om nah hoo pez nyeetz, Subsurf!
Hallo allerseits,
ich denke dieses Problem dürfte altbekannt sein, ich weiß nur nicht wonach ich googeln soll (das wonach ich gegoogelt habe führte zu nichts hilfreichem).
möglicherweise suchst du ein zweizeiliges Layout mit header und content
Bsp.: Ich habe einen <div>-Block mit fester und darunter einen zweiten mit variabler Höhe, wobei sich der zweite mindestens bis zur Bildschirmunterkante erstrecken soll, sofern der Inhalt nicht so weit reicht und größer werden soll, sobald der Inhalt über die Unterkante hinausgeht.
Dann brauchst du den zweiten Container nicht sondern schreibst den Inhalt direkt in den Body, falls meine Annahme mit der Layout-Vorstellung richtig ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>header-layout</title> <style type="text/css"> html { height: 100%; padding: 0; background-color: #333333;} body { margin: 0 auto; width: 80%; height: 100%; background-color: #cccccc;} #header { height: 200px; background-color: red;} </style> </head> <body> <div id="header">Header</div> <h1>Seitenüberschrift</h1> <p>Text</p> </body> </html>Matthias
--
-
möglicherweise suchst du ein zweizeiliges Layout mit header und content
Ja das trifft es ganz gut :D
Aber das Problem bei meinem Projekt trifft leider nicht ganz auf mein (eventuell unglücklich gewähltes) Beispiel zu: Bei meinem Projekt hat der Header eine Breite von 100%, der Contentbereich jedoch eine Feste Breite von 800px und wird zentriert angezeigt, daher klappt das mit dem direkt-in-den-Body schreiben nicht.-
Om nah hoo pez nyeetz, Subsurf!
Aber ... daher klappt das mit dem direkt-in-den-Body schreiben nicht.
Doch, muss halt der Header etwas anders positioniert werden. Auf diese Weise könnte er auch im Quelltext nach unten wandern, falls der Inhalt wichtiger als der Header ist.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="de"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>header-layout</title> <style type="text/css"> html { height: 100%; padding: 0; background-color: #333333;} body { margin: 200px auto 0; width: 800px; height: 100%; background-color: #cccccc;} #header { position: absolute; width: 100%; top: 0; left: 0; height: 200px; background-color: red;} </style> </head> <body> <h1>Seitenüberschrift</h1> <p>Text</p> <div id="header">Header</div> </body> </html>Matthias
--
-
-