Ankündigung

Einklappen
Keine Ankündigung bisher.

div auf 100%

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • LightApps
    hat ein Thema erstellt div auf 100%.

    div auf 100%

    so... mein problem ist, das ich möchte, das ein footer am unteren ende der seite kleben bleibt. der content darüber soll 100% haben.

    es will einfach nicht gelingen. hat irgendjemand tipps?

    css:
    Code:
    body
    {
        font: 10px Verdana;
        color: #000000;
        margin: 0 auto;
        padding: 0;
        height: 100%;
    }
    
    .main
    {
        width: 950px;
        margin: 0 auto;
        height: 100%;
    }
    
    .footer
    {
        background-image: url('../design/bottom_bg.gif');
        background-repeat: repeat-x;
        height: 80px;
        width: 100%;
        text-align: center;
        padding-top: 35px;
    }

  • LightApps
    antwortet
    hm.. vielen dank an alle, ich werd mal weiterprobieren

    Einen Kommentar schreiben:


  • Nendrew
    antwortet
    Hi,
    Folgendermaßen sollte es funktionieren:
    Als erstes musst du noch eine "Rahmen"-Box um den inhalt und den footer legen.
    Das sieht dann in etwa so aus:
    Code:
    <div class="rahmen">
     <div class="main">
      Hier kommt dann der Inhalt rein
     </div>
     <div class="footer">
      Inhalt des Footers
     </div>
    </div>
    Dann benötigst du noch folgende CSS Angaben:
    Code:
    .rahmen {
        position:absolute;
        min-height:100%;
        width:300px;
        border:1px solid #00ff00;
       }
    
       * html .rahmen {
        height:100%;
       }
    
       .main {
        padding-bottom:30px;
       }
    
       .footer {
        position:absolute;
        bottom:0px;
        height:30px;
        border:1px solid #ff0000;
        width:300px;
       }
    Die Angabe bei "* html .rahmen" wird nur vom IE interpretiert. Dies ist nötig, da er die angabe min-height nicht versteht.

    Ich hoffe du kommst klar.

    Einen Kommentar schreiben:


  • Montellese
    antwortet
    Zitat von Toxo Beitrag anzeigen
    Wenn ich es recht verstanden habe, soll der footer immer unten an fensterrand erscheinen, auch wenn darüber nicht viel inhalt steht,. bei viel inhalt sollte der footer "verschwinden", dann aber am seiten ende (beim scrollen) erscheinen.
    OK, da muss ich passen Ich hab mal miterlebt, wie ein Kumpel von mir das halbe Internet abgesucht hat um sowas zu machen! Die Lösung mit html auf 100% zu setzen, funktioniert eigentlich, ABER im IE nur im Quirksmode (wenn ich mich richtig erinnere). Mein Kumpel hatte auf jedenfall nach 1 Monat noch keine Lösung, die überall funktioniert! Deshalb hab ich mir geschworen sowas nie machen zu wollen ^^

    Einen Kommentar schreiben:


  • Toxo
    antwortet
    Wenn ich es recht verstanden habe, soll der footer immer unten an fensterrand erscheinen, auch wenn darüber nicht viel inhalt steht,. bei viel inhalt sollte der footer "verschwinden", dann aber am seiten ende (beim scrollen) erscheinen.
    das heisst, die y position wäre immer MINDESTENS ( fensterhöhe - 80px ) (wenn der footer80px hoch sein sollte).

    Da wäre die frage: gibt es eine möglichkeit (js ?) auszulesen, wie weit nach unten der inhalt reicht (also eine art EOF y-koordinate? )

    falls ich hier falsch interpretiere und nur verwirrung stifte, sag bescheid, dann editiers ichs weg

    Einen Kommentar schreiben:


  • Montellese
    antwortet
    Also wenn es daran liegt, dass du links, rechts und unten noch die Hintergrundfarbe siehst, anstatt dass der Footer bis ganz an die Ränder geht, musst du folgendes machen:

    Code:
    body {
        padding: 0px;
        margin: 0px;
    }
    Das Body-Element hat auch ein padding! Wahrscheinlich ist margin: 0px; sogar überflüssig, hab das aber irgendwann mal so ausprobiert und nie anders *g*

    Einen Kommentar schreiben:


  • PsychoEagle
    antwortet
    Wsa gelingt nicht genau? Wie sieht das falsche Ergebnis aus?

    Tipps (ohne Garantie):
    - Erweitere deine Div-Boxen mit float:left;
    - Erweitere dein html Tag mit height:100%
    - Ändere dein Body auf height:90%
    - Spiel mit den Werten rum falls 2 Scrollleisten kommen

    Einen Kommentar schreiben:


  • LightApps
    antwortet
    ne, das soll schon ein footer sein, der sich mit nach unten bewegt. aber der ansatz ist gut. mal schauen was passiert, wenn ich position: fixed rausnehm.

    Einen Kommentar schreiben:


  • Montellese
    antwortet
    Meinst du sowas wie ich hier gemacht habe: configWYSQIWY - Example ???

    Hab ich damit gemacht:
    Code:
    div#footer{    
        position: fixed;
        left: 0px;    
        bottom: 0px;
        height: 16px;
        width: 100%;
        background-color: #0099FF;
        font-size: 11px;
        text-align: left;
    }
    }

    Einen Kommentar schreiben:

Lädt...
X