zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FSA: Veerbung der Höhe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.07.2011, 14:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.06.2005
Beiträge: 6
frabron befindet sich auf einem aufstrebenden Ast
Standard 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>
Ich probiere seit geraumer Zeit, da eine Lösung zu finden, kenne mich mit CSS aber nicht besonders gut aus. Deshalb wäre ich froh, wenn mir jemand einen Vorschlag/Tipp/Stichwort geben könnte, mit dem ich die Größe von #mapframe relativ zum Elternelement definieren kann. Threads hier im Forum beziehen sich immer direkt auf Footer-Stick-Alt oder Faux Columns, nicht auf relativ große Kindelemente. In der FAQ hatte ich da auch nichts direkt zu gefunden (oder nicht als relevant erkannt). Und für Google sind die Stichworte doch sehr allgemein, so dass Unmengen an Ergebnissen gelistet werden, die aber doch alle nicht mein Problem beschreiben. Normalerweise findet man hier immer schon eine Antwort, doch diesmal reicht mein Such-Fu wohl nicht aus

Vielen Dank

Frank
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:11 Uhr.