Ankündigung

Einklappen
Keine Ankündigung bisher.

div auf 100%

Einklappen

Neue Werbung 2019

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

  • 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;
    }

  • #2
    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;
    }
    }

    Kommentar


    • #3
      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.

      Kommentar


      • #4
        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
        [I]"Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)[/I]

        Kommentar


        • #5
          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*

          Kommentar


          • #6
            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

            Kommentar


            • #7
              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 ^^

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  hm.. vielen dank an alle, ich werd mal weiterprobieren

                  Kommentar

                  Lädt...
                  X