У меня очень простая структура flexbox с дочерними элементами заголовка, основного и нижнего колонтитула, где нижний колонтитул является конечным элементом и играет роль липкого нижнего колонтитула, чтобы оставаться в нижней части страницы на длинных страницах. Но всякий раз, когда окно сокращается (высота), нижний колонтитул перекрывает весь контент (другие элементы одного уровня), как если бы он имел свойство фиксированной позиции.
Мне бы хотелось, чтобы оно имело поведение по умолчанию и было бы таким же, как и другие, которые скрыты, когда высота сайта слишком мала для отображения текущего последнего элемента.
Моя структура:
HTML
<div id="main">
<div id="alternate_header"></div>
<div id="header">
<div>1</div><div>2</div>
</div>
<div id="content">body</div>
<div id="footer">footer</div>
</div>
CSS
body,html {
margin: 0;
height:100vh;
}
#main {
display:flex;
flex-direction: column;
width:100%;
height:100vh;
min-height:0;
}
#main > div {
width: 100%;
}
#alternate_header {
display; none;
}
#header {
background-color:red;
height:5rem;
line-height:5rem;
align-self:flex-start;
display:flex;
flex-direction:row;
}
#header > div {
flex:1;
}
#content {
flex:1;
background-color:#dcdcdc;
min-height:0;
}
#footer {
align-self:flex-end;
background-color: yellow;
height: 4rem;
}
JSFIDDLE