Push footer в нижней части страницы

Question

Структура сайта выглядит следующим образом: есть общий блок (контент), в котором размещаются все элементы сайта и второй блок, нижний колонтитул, который нужно прижать к в нижней части сайта.

Контентный блок position: absolute для выравнивания центра (по горизонтали) - для уменьшения экрана, когда он равномерно оставлен справа и слева от его границ. Проблема в том, что при такой блочной структуре нижний колонтитул не остается прижатым к нижней части страницы. Вот код:

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
.a_wrapper { 
 
    width: 600px; 
 
    left: 50%; 
 
    margin-left: -300px; 
 
    position: absolute; 
 
    border: 1px dotted #000000; 
 
} 
 

 
.a { 
 
    height: 800px; 
 
} 
 

 
.b { 
 
    width: 90%; 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: auto; 
 
    position: absolute; 
 
    border: 1px solid #000000; 
 
}

<div class = "a_wrapper"> 
 
    <div class = "a"></div> 
 
</div> 
 
<div class = "b"> 
 
</div>

https://jsfiddle.net/0k979ud5/

Answer 1

Есть две вещи, которые вызывает это - из-за использования только позиционированы абсолютно элементов, который берет их из потока документов, сам body элемент имеет нет высота. Таким образом, это должно быть установлено так же, как и контент. Затем нижний колонтитул расположен в соответствии с ближайшим расположенным элементом, также из-за position: absolute. Прямым родителем является body, у которого нет позиционирования, поэтому он будет по умолчанию для объекта window. Чтобы решить эту проблему, body следует position: relative:

body { 
 
    height: 800px; 
 
    position: relative; 
 
    padding: 0px; 
 
    margin: 0px; 
 
} 
 

 
.a_wrapper { 
 
    width: 600px; 
 
    left: 50%; 
 
    margin-left: -300px; 
 
    position: absolute; 
 
    border: 1px dotted #000000; 
 
} 
 

 
.a { 
 
    height: 800px; 
 
} 
 

 
.b { 
 
    width: 90%; 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    margin: auto; 
 
    position: absolute; 
 
    border: 1px solid #000000; 
 
}

<div class="a_wrapper"> 
 
    <div class="a"></div> 
 
</div> 
 
<div class="b"></div>

Это подвал должен быть ниже содержание, body должен быть 850 пикселей в высоту, конечно ...