Нижний колонтитул не прилипает к низу страницы при прокрутке

Я кодирую веб-страницу, которая должна иметь верхний колонтитул вверху, нижний колонтитул внизу и боковой столбец справа. У меня возникли проблемы с размещением нижнего колонтитула в нижней части страницы. Я не хочу, чтобы это было position: fixed (это будет раздражать), но я хочу, чтобы оно появлялось внизу страницы, когда вы прокручиваете страницу до конца. (В случае, если прокрутка не нужна, она должна появиться внизу окна)

Вот что я использую. Вероятно, есть довольно простое решение, но я не понимаю, что это такое. Скопируйте/вставьте это, и вы увидите.

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 200%;
      }

      #side {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #0A0;
        z-index: 100;
      }

      #header {
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #A00;
        z-index: 200;
      }

      #header_push {
        clear: both;
        height: 40px;
      }

      #footer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00A;
        z-index: 150;
      }

      #footer_push {
        clear: both;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      HEADER
    </div>
    <div id="header_push"></div>
    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    </div>
    <div id="side">
      SIDE COLUMN
    </div>
    <div id="footer_push"></div>
    <div id="footer">
      FOOTER
    </div>
  </body>

Правильно работает:

работает правильно

Неправильная работа при прокрутке вниз (см. полосу прокрутки сбоку страницы):

неправильная работа с прокруткой


html css css-position absolute
person Geoff    schedule 27.07.2013    source источник
comment
поделитесь ссылкой на jsfiddle?   -  person Ankit Aggarwal    schedule 28.07.2013
comment
Пример, см. это.   -  person Vucko    schedule 28.07.2013

Ответы (4)


arrow_upward
-2
arrow_downward

Вот JSBIN

Измените свой CSS, как показано ниже.

#footer {
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #00A;
  z-index: 150;
}

Удалить bottom: 0; из #footer{..}

person Naveen Kumar Alone    schedule 27.07.2013
comment
Если вы удалите содержимое, оно не прилипнет ко дну. - person Maximus; 21.05.2015
comment
Я также столкнулся с той же проблемой, но это решение не помогает моей проблеме :( - person Emerald; 23.03.2016
comment
Это не решает проблему - возможное решение с ответом Vucko - person Braza; 05.04.2016

arrow_upward
5
arrow_downward

Вам нужно изменить position на fixed

person Alex Montoya    schedule 28.06.2018
comment
Да, наконец. Спасибо, это помогло! - person Mark; 20.05.2021

arrow_upward
3
arrow_downward

См. мой комментарий для примера того, как это сделать.

Но в вашей ситуации просто поставьте position:relative на тело.

JSBin

Их absolute позиция нижний колонтитул будет находиться в relative позиции родителя и будет использовать его пространство, поэтому установка bottom:0 поместит нижний колонтитул в нижнюю часть его _parent.

Некоторые примеры элементов с разными позициями

person Vucko    schedule 27.07.2013
comment
Это возможное решение. Это имеет смысл, потому что это противоречит поведению элемента с правилом css position:absolute внутри элемента с правилом css position:relative - person Braza; 05.04.2016

arrow_upward
0
arrow_downward

Эй, я сделал скрипку, используя твой код. насколько я понимаю, это то, что вы ищете. Позвольте мне знать, если это помогает.

Сделанные изменения: CSS

#footer {
    height: 50px;
    background-color: #00A;
    z-index: 150;
  }

Ссылка на скрипку: http://jsfiddle.net/daltonpereira/q7Dqg/

person Dalton Pereira    schedule 27.07.2013