Как разместить div в нижней части страницы

Как установить положение <div> в нижней части страницы с помощью CSS или jQuery?

Ответ 1

Используйте position:absolute и bottom:0

Проверьте рабочий пример. http://jsfiddle.net/gyExR/

Ответ 2

Вы можете использовать position:absolute;bottom:0;, если это все, что вам нужно.

Ответ 3

в css: позиция: абсолютная или позиция: фиксированная

Ответ 4

Об этом уже ответили, но чтобы дать немного больше контекста для не-CSS-экспертов:

Учитывая HTML

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

то следующий css

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

расположит текст в правом нижнем углу окна просмотра (окно браузера). Прокрутка перемещает текст нижнего колонтитула.

Если вы используете

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

с другой стороны, нижний колонтитул будет находиться внизу вашего окна просмотра, даже если вы прокрутите список. Тот же метод можно использовать с top: 0 и left: 0 btw, чтобы поместить элемент в верхнем левом углу.

Ответ 5

Комбинация position:fixed; с bottom:0; работает для меня.

Ответ 6

Я думаю, вы можете это сделать:

    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>