Я пытаюсь создать макет веб-страницы с верхним/нижним колонтитулом (100% ширина, высота 145 пикселей), "основная область" между верхним/нижним колонтитулом (ширина 100%, динамическая высота) и контейнер вокруг содержимого это уникальный цвет фона (ширина 860 пикселей, динамическая высота, но всегда "флеш" на нижнем колонтитуле).
Проблема, с которой я столкнулась, заключается в том, что я не могу представить, что контейнер содержимого всегда находится на одном уровне с нижним колонтитулом при минимальном содержании. Используя настройку, такую как (оригинальный пример), вы получите нижний колонтитул, плавающий над контентом, если есть респектабельный/ "нормальный" объем контента или если размер окна изменяется.
И следующий CSS приводит к разрыву между содержимым и нижним колонтитулом.
html,body{
margin:0;
padding:0;
height:100%;
background:yellow;
}
.wrap{
min-height:100%;
position:relative;
}
header{
background:blue;
padding:10px;
}
#content{
height:100%;
width: 400px;
margin:0 auto;
background:orange;
padding:30px;
}
footer{
background:blue;
position:absolute;
bottom:0;
width:100%;
height:60px;
}
Как я могу сделать контейнер содержимого полной высотой экрана, когда контент минимален, а нижний колонтитул "вставить" в нижнюю часть страницы, а также динамически изменять размер соответствующим образом, если есть нормальный объем содержимого (нижний колонтитул всегда находится в нижней части содержимого)?
Спасибо!