Разместить контент внизу страницы
Моя проблема:
Я разработал одну страницу. Верхний колонтитул, содержание (раздел и в сторону) и нижний колонтитул.
Нижний колонтитул и заголовок являются липкими.
Я хочу, чтобы содержимое оставалось в конце страницы и выше нижнего колонтитула.
Направь меня, пожалуйста.
1 ответ
Решение
Вы намекаете на что-то подобное? В этом примере. независимо от того, какой размер экрана ваш контент всегда будет придерживаться нижнего колонтитула, даже если в нем есть одна строка.
*{
box-sizing: border-box;
}
body, html{
height: 100%;
width: 100%;
margin: 0;
}
body{
display:flex;
flex-direction: column;
}
#container
{
margin: 0 auto;
width:90%;
background-color: white;
border: 2px solid black;
flex-shrink:0;
flex-grow:1;
display:flex;
}
.header,.footer
{
margin: 0 auto;
width:100%;
text-align: center;
height:1.5em;
background-color: white;
border: 1px solid black;
flex-shrink:0;
background-color:green;
color:white;
}
.col {
height:90%;
flex-shrink:0;
flex-grow:1;
margin:0 2% 0 2%;
}
<div class="header">
Header here
</div>
<div id="container">
<div class="col">
test column 1
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
</div>
<div class="col">
test column 2
<p>
Content
</p>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
<div class="footer">
Footer Here
</div>