Как задать высоту в процентах, если точная высота родителя не определена? [дубликат]

193

05 июня 2019, 15:30

На данный вопрос уже ответили:

Как всегда прижимать footer к низу экрана? 7 ответов

Учу 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>

Answer 1

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

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