it-swarm.com.de

So positionieren Sie div am Ende einer Seite

Wie kann ich die Position eines <div> mit CSS oder jQuery zum Ende der Seite setzen?

11
Shahin

Verwende position:absolute und bottom:0

Überprüfen Sie das Arbeitsbeispiel. http://jsfiddle.net/gyExR/

11
Hussein

Sie können position:absolute;bottom:0; verwenden, wenn das alles ist, was Sie wollen.

6
fabrik

in CSS: Position: absolut oder Position: fest

2
lmondria

Dies wurde bereits beantwortet, um aber auch Nicht-CSS-Experten ein wenig mehr Kontext zu bieten:

Angesichts der HTML

<html>
  <body>
    <p>Some content</p>
    <div class="footer">down there</div>
  </body>
</html>

dann das folgende CSS

div.footer {
  position: absolute;
  bottom: 0;
  right: 0;
}

positioniert den Text in der unteren rechten Ecke Ihres Ansichtsfensters (Browserfenster). Durch Scrollen wird der Fußzeilentext verschoben.

Wenn du benutzt

div.footer {
  position: fixed;
  bottom: 0;
  right: 0;
}

auf der anderen Seite bleibt die Fußzeile am unteren Rand Ihres Ansichtsfensters, auch wenn Sie einen Bildlauf durchführen. Dieselbe Technik kann mit top: 0 und left: 0 verwendet werden, um ein Element in der oberen linken Ecke zu positionieren.

1
Stefan Haberl

Die Kombination position:fixed; mit bottom:0; funktioniert bei mir.

1
Shrinivas Naik

Ich denke, Sie können dies tun:

    html{
      min-height:100%;
      position:relative;
      background-color:red;
    }
    .footer{
      bottom:0;
      position:absolute;
      background-color:blue;
    }
<html>
  <body>
    <div class='footer'>
    <h1>I am Footer</h1>
    </div>
    </body>
  </html>
0
Gilberto Giro