Как разместить нижний колонтитул внизу страницы в CSS?

Question

Я попытался создать нижний колонтитул страницы для каждой страницы. Объект должен центрировать нижний колонтитул и поместить его в нижней части страницы. Вы можете проверить мои JSFiddle или посмотреть код непосредственно следующим образом.

HTML

<div id="page1" class="page"> 
    <div class="footer"> 
    <p>1</p> 
    </div> 
</div> 

CSS

div.page { 
    height: 300px; 
    width: 180px; 
    border: 1px solid #000; 
    margin: auto; 
    margin-bottom: 5px; 
    text-align: center; 
} 
div.footer { 
    background-color: #DDD; 
    width: 100%; 
    bottom: 0; /* doesn't work */ 
} 
p { 
    width: 15px; 
    color: white; 
    background-color: red; 
    text-align: center; 
    margin: auto; 
    bottom: 0; 
} 

я видел на аналогичный вопрос о How to position div at the bottom of a page ?. Однако, когда я применил его предложение, внизу + позиция настройка нижних колонтитулов на каждой странице объединена вместе, расположенными в нижней части окон навигатора. Вот связанные JSFiddle

Может ли кто-нибудь помочь? Большое спасибо.

Answer 1

Вам не хватает позиция: относительная; применяется к class = "page". Таким образом, элемент, который имеет установленное абсолютное положение, знает, что должен быть снизу: 0 относительно родительского элемента .page.

div.page { 
    height: 300px; 
    width: 180px; 
    border: 1px solid #000; 
    margin: auto; 
    margin-bottom: 5px; 
    text-align: center; 
    position:relative; 
} 
div.footer { 
    background-color: #DDD; 
    width: 100%; 
    bottom: 0; /* it works now */ 
    position: absolute; 
} 
p { 
    width: 15px; 
    color: white; 
    background-color: red; 
    text-align: center; 
    margin: auto; 
    bottom: 0; 
} 

DEMOhttp://jsfiddle.net/9xzb9m48/3/

Answer 2

Попробуйте это:

div.page { 
 
    height: 300px; 
 
    width: 180px; 
 
    border: 1px solid #000; 
 
    margin: auto; 
 
    margin-bottom: 5px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
div.footer { 
 
    background-color: #DDD; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 
p { 
 
    width: 15px; 
 
    color: white; 
 
    background-color: red; 
 
    text-align: center; 
 
    margin: auto; 
 
    bottom: 0; 
 
}