• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage zu Div-Aufbau (3-zeilig; Kopf fest, Inhalt/Fuß abhängig)

W

weppy

Neues Mitglied
Hallo zusammen,

ich möchte folgendes realisieren:


Kopf und Fuß sollen über die gesamte Fensterbreite einen Hintergrund bekommen. (rot/blau)
Der Inhaltsbereich für alle drei Teile soll eine feste Breite haben und zentriert im Fenster sein.(grün)
Wenn wenig Text vorhanden ist, soll der Fuß nach oben wachsen. Wenn viel Text vorhanden ist, dann gibt er den Platz frei und schrumpft je nach Menge bis auf ein Minimum. Auch wenn gescrollt werden muss, hat der Fuß die minimale Höhe.

Meine Überlegungen:
Code: 
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
Code: 
html, body {
    height: 100%; }

body {
    margin: 0 auto;
    text-align: center; }

#header {
    height: 200px;}


#content {
    width: 820px;
    margin: 0 auto;
    text-align: left;
    position: relative;}

#footer {
    min-height: 180px; 
    bottom: 0;}
Bei viel Text funktioniert dies ausgezeichnet. Sobald ich aber wenig Text habe, fliegt der Footer an den unteren Rand des Contents. Mit position:fixed könnte ich ihn an den unteren Fensterrand binden, dann sehe ich ihn aber auch, wenn viel Text vorhanden ist und muss dann den Text scrollen (möchte aber den Footer nicht sehen sondern wirklich erst ganz unten).

Hat jemand einen Rat?
Vielen Dank für eure Antwort.
 
Willkommen im Forum.

Wieso nicht einfach so?

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">
* {
    margin: 0;
    padding: 0;
}

html, body {
    background: #030F80;
    color: black;
}

#header {
    background: #7F033B;
}

#content {
    background: white;
}
        </style>
    </head>

    <body>

        <div id="header">#header</div>
        <div id="content">#content</div>
        <div id="footer">#footer</div>

    </body>

</html>
 
Danke für deine Antwort.
In deinem Beispiel würde der Footer einfach hinter dem Content hängen und nur unten am Rand sein, wenn der Content lang genug ist.
Wie eingangs beschrieben, möchte ich den Footer aber auch am unteren Rand haben, wenn der Content kürzer ist. Dies berücksichtigt deine Version nicht.
 
Wie eingangs beschrieben, möchte ich den Footer aber auch am unteren Rand haben, wenn der Content kürzer ist. Dies berücksichtigt deine Version nicht.
Zum Vergrößern anklicken....

Tut sie nicht?

Du hast geschrieben:

Wenn wenig Text vorhanden ist, soll der Fuß nach oben wachsen. Wenn viel Text vorhanden ist, dann gibt er den Platz frei und schrumpft je nach Menge bis auf ein Minimum.
Zum Vergrößern anklicken....
 
Da habe ich mich wohl missverständlich ausgedrückt. Mit "nach oben wachsen" meine ich, dass er einfach höher wird, aber weiterhin am unteren Rand festsitzt.
 
Die Lösung am Ende sieht doch schonmal ganz prima aus.

Muss ich nur noch schauen, wie ich dies übertrage, da ich ja keinen Wrapper habe, weil Header und Footer über die gesamte Fensterbreite gehen sollen.
Und: Ist es möglich den Footer in der Höhe wachsen zu lassen, wenn der Content zu kurz ist? Dort hat er ja eine feste Höhe... Hier müsste irgendwie eine Abhängigkeit zwischen C und F geschaffen werden.
 
über die gesamte breite dürfte ja kein Problem sein, wenn man da feste Werte durch width:100% und min-width:100% ersetzt. Wozu denn den Footer wachsen lassen? Wenn wenig Content da ist, dann ist er doch im Beispiel auch unten. Mein Footer war halt fest, immer Copyright und <hr>. Aber probier es aus, ich bin in CSS alles andere als fit.
 
NetAktiv schrieb:
Wozu denn den Footer wachsen lassen? Wenn wenig Content da ist, dann ist er doch im Beispiel auch unten.
Zum Vergrößern anklicken....
Ich möchte nicht den leeren weißen Hintergrund haben, wo kein Text steht sondern lieber die Farbe des Footers unten... So dass der Text oben und unten gleichen Abstand zu Head / Foot hat.
 
Ähnlich waren dann auch meine Probleme. Ich wollte ausgehend von der Lösung oben, die ja sehr vielversprechend aussah, lediglich unterhalb des Menüs horizontal noch ein Header-Div für eine Überschrift einfügen und dann alles ein wenig vom Rand oben und unten entfernt haben.
 
Jep, danke. Das ist eigentlich prima.

Gäbe es denn noch die Möglichkeit, dass der Footer höher wird - also bis an den letzten Textabsatz des Contents heranreicht? Ist wahrscheinlich nicht machbar, da "height" dann irgendwie variabel festgelegt werden müsste...
 
Ich habe Beispiele gesehen, wo man Iframes variabel in der Höhe gemacht hat, indem man die Höhe des Inhaltes abfragte. Das klappte auch, bis man die Sicherheit bei den Browsern erhöht hat und nicht mehr auf den Inhalt zugreifen konnte, wenn er aus einer anderen Domain kommt. Aber etwas ähnliches könntest ja versuchen, also die Höhe des Footer finden und dann #content padding-bottom und #footer margin-top dynamisch setzen.
 
Mit etwas Getrickse mit Hintergrundfarben kann es auch mit footerStickAlt gehen:

HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background: #030F80;
    color: black;
}

#nonFooter {
    position: relative;
    min-height: 100%;
}

* html #nonFooter {
    height: 100%;
}

#header {
    background: #7F033B;
}

#content {
    background: white;    
}

#content .spacer {
    padding-bottom: 9em;
    background: #030F80;
}

#footer {
    position: relative;
    margin-top: -9em;
    height: 9em;
    border-top: 1px solid white;
    background: #030F80;
    color: white;
}
        </style>
    </head>

    <body>

        <div id="nonFooter">
            <div id="header">#header</div>
            <div id="content">
                #content
                 <div style="height: 600px;">
                     Etwas Abstand (das hier zählt als Content) Zum test height verändern.
                 </div>
                 <div class="spacer"></div>
            </div>

        </div>
        
        <div id="footer">#footer</div>        

    </body>

</html>
 
Ich denke, der Wunsch war, dass der footer dynamisch nach oben wachsen kann, bis er an den #content stößt, und dann erst nach unten das Bild verlässt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben