Wie mache ich meine Fußzeile nach unten gehen, wie ich Inhalte?

Ich strukturierte meine Seite wie diese:

<body>

   <div class="main">

      <div class="header">
          content
      </div> 

      <div class="section">
         content
      </div>

      <div class="sidebar">
         content
      </div>

      <div class="clearing"></div>

      <div class="footer">
         content
      </div>
   </div>
</body>

und css -

.main {
        position:relative;
        width:908px;
        margin-top:0px;
        border:solid 0px;
        margin:0 auto;
    }

.header {

        position:relative;
        height:200px;
        margin: auto;
    }


  div.section {
            float:left;
        position:absolute;
        width: 584px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left;
        }

  div.sidebar{
        float:right;
        position:relative;
        width: 324px;
        height:500px;
        margin-top: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align:left; 
    }

   .clearing {

        clear:both;
    }



   .footer {
    position:relative;
    left:0px;
    top:0px;
    width:908px;
    height:300px;
   }

Wenn ich Inhalte in den div-Abschnitt, ich geht alle über die Fußzeile. Die Fußzeile ist fest auf diesen Punkt, und wie Inhalte Hinzugefügt werden, die Seite wächst und der footer bleibt immer noch.

Was muss ich tun, jedesmal, wenn ich Inhalte zu erhöhen in der css-Datei entweder in Höhe der Abschnitt oder die Höhe der Randleiste - entweder man arbeiten würde - aber ich die beiden Höhen (Abschnitt und sidebar) auf den gleichen Wert, weil es scheint, das richtige zu tun. Die Fußzeile wird dann nach unten gedrückt, wie die Höhe des Abschnitts und die sidebar wächst.

Jedoch, wenn ich die atribute einer Höhe um die Inhalte, die ich hinzufügen, um den Abschnitt, es hat keine Auswirkungen auf die position der Fußzeile, vielleicht, weil es hat nichts zu tun mit der Höhe des Abschnitts selbst.

Gibt es eine Möglichkeit, um die Fußzeile zu reagieren, um den Raum, den Inhalt, der Hinzugefügt wird, besetzen Sie, und nur automatisch bewegen, die übrigen an der Unterseite der Seite ?

Ich habe dieses problem. Ich folgte Css-tricks vorgeschlagenen sticky-footer-tutorial und es hat mir geholfen, dieses Problem zu beheben, empfehle ich, Sie versuchen es. css-tricks.com/snippets/css/sticky-footer
Entfernen Sie die absolute Positionierung .Abschnitt
Zumindest die, Sie benötigen, um Ihre divs oberhalb der Fußzeile in ein weiteres div mit der clearing-element am Ende enthalten Sie alle.
Ich habe versucht, die sticky footer, hat bei mir nicht funktioniert... habe ich geändert, um relative, und es ist nichts passiert. Ich änderte th position des divs, mit th clearing element am Ende, es hat nicht funktioniert... aber vielen Dank.

InformationsquelleAutor user2363043 | 2013-05-08

1

Haben Sie position:absolute auf Ihrem .section div, welches immer nur seine CSS-height-Wert für die Menge der Raum, den es einnimmt, sich unabhängig von Ihrem tatsächlichen Inhalt. Entfernen, dass die absolute position sollte Ihre Probleme zu lösen. Es gibt (fast) immer einen Weg, um die absolute Positionierung. In deinem Beispiel scheint es völlig unnötig.

Hier ist eine hilfreiche Seite für die CSS-Positionierung:
http://www.barelyfitz.com/screencast/html-training/css/positioning/

Hoffe, es hilft!
- Wenn Sie besorgt über die Höhe des div für Ihr layout, ich würde vorschlagen, mit der "min-height: Wert" als ein Mittel, entsprechend lassen Sie es zu erweitern und beeinflussen den Fluss von Ihrer Seite zusätzlich zu loszuwerden, um die absolute Positionierung.
- ich geändert, um relativ... es hat nicht funktioniert. Das layout bleibt das gleiche, aber der footer immer noch verhält sich wie vorher.
- Sie wollen auch, um die zu entfernen height Attribut in der CSS-Datei für die .section. Ich kopierte Ihre HTML-und CSS-verbatim in meinem localhost auf meinem Rechner Hinzugefügt 5 Absätze lorem ipsum, um die .section div, und entfernt die height und position, und alle haben sich benommen, als gedacht.
InformationsquelleAutor Anthony Hessler
0

Versuchen Sie dies:
```
.footer {
position:relative;
left:0;
bottom:0;
width:908px;
height:300px;
```
}

Auch beim Putten 0, gibt es keine Notwendigkeit zum hinzufügen von px.
- Ich Tat, was Sie vorgeschlagen. Es hat nicht funktioniert. Danke.
InformationsquelleAutor Mike Terry
0

Ich bin der überprüfung der CSS code und haben entdeckt position in jedem div. Versuche es auszugleichen, denn es wirkt sich auf andere divs

Auch versuchen
```
.footer{
   clear: both
}
```
InformationsquelleAutor Wepex

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.