|
|||
FSA: Veerbung der Höhe
Hallo,
ich habe ein kleines Beispiel, das die Footer-Stick-Alt Technik verwendet. Durch die Verwendung von min-height in #wrapper wird anscheindend keine Höhe an die nachfolgenden Elemente vererbt, denn #content und #mapframe haben keine sichtbare Dimension, ausser dem padding von #content. Gibt man #wrapper eine Höhe (zusätzlich, oder ausschliesslich mittels height: 100%;), dann wird die Höhe an die nachfolgenden Elemente vererbt und #content und #mapframe werden entsprechend gezeichnet. Ziel ist es, #mapframe entsprechend der Größe des Viewports darzustellen, sozusagen ein Gummi-Div: Hier mein Testcode: HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100%; } #wrapper { min-height: 100%; background-color: red; } #footer { margin-top: -300px; background-color: grey; height: 300px; width: 100%; } #content { height: 100%; width: 75%; background-color: blue; margin: 0 auto; padding-bottom: 300px; } #mapframe { height: 62%; width: 100%; background-color: gold; } </style> </head> <body> <div id="wrapper"> <div id="content"> <div id="mapframe"></div> </div> </div> <div id="footer"></div> </body> </html> Vielen Dank Frank |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
DIV: Ausfüllen restlicher Höhe bei weiterem DIV mit fixer Höhe | danoman | CSS | 5 | 24.04.2011 19:38 |
Fehler bei Positionierung: ul neben h1 - gleiche Höhe möglich? | jungle | CSS | 2 | 04.05.2009 19:25 |
Divv 100% Höhe mit Hintergrundbild | Gsicht | CSS | 0 | 24.03.2009 09:30 |
Tablle mit 100% Höhe in IE | Be1er0ph0r | CSS | 4 | 03.03.2007 17:15 |
Automatische Höhe zweier Boxen | Abschluss auf gleicher Höhe | mischa | CSS | 5 | 07.02.2005 18:21 |