0

Учу CSS и HTML сам.
Была страничка высотою в экран: больше не надо было. Понадобилось расширить.
Полагаю, не один я с такой проблемой: футер не падает вниз сайта, а фиксирован на высоту экрана, чем перекрывает содержимое блока "надфутер". Дело в том, что в блоке "надфутер" должны быть элементы с динамическим (не в фиксированным по пикселям).
Если я задаю "надфутеру": height: auto , то футер стаёт вниз, но размеры элементов body сбиваются. Подскажите грамотное решение.

html{height: 100%}
body{height: 100%}
#arblock{
height: 57%;    /*нужно так и оставить*/
}
#main_content{
/*min-*/height: 95%;
/*height: auto;*/
margin-bottom: -15px;
}     /*футер не падает вниз сайта, а держится на одном месте*/
#main_content:after{
content: "";
display: block;
}
footer, #main_content:after{
height: 15px;
}
<html>
<head>Хэд</head>
<body>
<div id="main_content">
<header>Хэдэр</header>
<hr/>
<div id="arblock">
<article class="attention">Aртикль1</article>
<article class="attention">Артикль2</article>
<article class="attention">Артикль3</article>
</div>
<hr/>
</div>
<footer>
Футер (должен быть в самом конце страницы)
</footer>
</body>
</html>
rtKeen
  • 1

1 Answers1

0

Попробуйте этот пример, это то, что вам нужно.

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Алекс
  • 11
  • К сожалению, не помогло, если сделать по примеру, то футер падает, но сбиваються размеры артиклей, а если сделать по примеру, но вместо min-height задать height, то размеры сохраняются, но футер висит. – rtKeen Dec 10 '18 at 17:53