Положить нижний колонтитул со 100% шириной после одного div со 100% шириной

Question

Я просто пытаюсь поставить нижний колонтитул ровно ниже одного div со 100% шириной, но если я использую позицию: абсолютная ее не будет на 100% шириной.

.box { 
    width:100%; 
    left:0%; 
    height:700px; 
    position:absolute; 
    margin-top:6%; 
    background-image:url(); 
    background-position-y:90%; 
    background-position-x:50%; 
} 

.footer { 
    background-color:#ffffff; 
    width:100%; 
    height:90px; 
    position:absolute; 
    bottom:-30%; 
    left:0%; 
    box-shadow:0px -5px 0px 0px #c72031; 
} 

HTML:

<div class="box"></div> 

<div class="footer"></div> 

https://jsfiddle.net/opj984j7/

Answer 1

Просто поместите колонтитул внутри коробки и дать ему bottom: 0; для отображения без каких-либо краев от дна. Или показать ниже, уменьшить bottom высоты нижних колонтитулов bottom: -90px;:

.box { 
 
    width: 100%; 
 
    left: 0%; 
 
    height: 700px; 
 
    position: absolute; 
 
    margin-top: 6%; 
 
    background: #000; 
 
} 
 
.footer { 
 
    background-color: #ffffff; 
 
    width: 100%; 
 
    height: 90px; 
 
    position: absolute; 
 
    bottom: -90px; 
 
    left: 0%; 
 
    box-shadow: 0px -5px 0px 0px #c72031; 
 
}

<div class="box"> 
 
    <div class="footer"></div> 
 
</div>

Answer 2

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

Элемент с положением: абсолютный; позиционируется относительно ближайшего расположенного предка (вместо того, чтобы располагаться относительно окна просмотра, например, фиксированного).

Однако; если элемент с абсолютным расположением не имеет позиционированных предков, он использует тело документа и перемещается вместе с прокруткой страницы.