Как расположить div внизу страницы

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


html jquery css position
person Shahin    schedule 05.04.2011    source источник

Ответы (6)


arrow_upward
11
arrow_downward

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

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

person Hussein    schedule 05.04.2011
comment
Если страница длиннее области просмотра, div будет перекрывать содержимое. Чтобы решить эту проблему, ознакомьтесь с этим примером: matthewjamestaylor.com/blog/bottom-footer- демо.htm - person grant; 31.05.2011
comment
Еще один источник информации о случаях исключений из правил — CSS-трюки: css-tricks.com/snippets/css/sticky-footer - person blong; 30.03.2012
comment
Этот пример не работает для страниц с полосой прокрутки - person fortune; 25.05.2015

arrow_upward
6
arrow_downward

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

person fabrik    schedule 05.04.2011

arrow_upward
2
arrow_downward

в css: position:absolute или position:fixed

person lmondria    schedule 05.04.2011

arrow_upward
1
arrow_downward

На это уже был дан ответ, но чтобы дать немного больше контекста для неспециалистов по 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 между прочим, чтобы расположить элемент в верхнем левом углу.

person Stefan Haberl    schedule 24.01.2013

arrow_upward
1
arrow_downward

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

person Shrinivas Naik    schedule 25.02.2013

arrow_upward
0
arrow_downward

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

    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>

person Gilberto Giro    schedule 19.11.2016