Этот вопрос наверняка уже задавался не раз, но в поиске я не нашел решений для своей задачи. В общем есть следующий каркас:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<div class="wrapper">
<div class="row">
<nav class="nav-main col-lg-2">
<ul>
<li>Home</li>
<li>Test</li>
</ul>
</nav>
<div class="content col-lg-10">
<h2>Test</h2>
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae.
</div>
</div>
</div>
<footer>
TEMP FOOTER
</footer>
</body>
</html>
main.css:* {
margin: 0;
}
html, body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
background-color: #EDEEF0;
height: calc(100% - 50px);
}
.nav-main {
background-color: #364552;
}
.content {
background-color: #ffffff;
}
footer {
position: absolute;
background-color: #292929;
color: #ffffff;
height: 50px;
bottom: 0;
right: 0;
left: 0;
}
.row {
margin: 0;
}
И я ожидал, что wrapper и body растянутся на всю высоту и footer соответственно прижмется к низу, но итог получился таким:
https://codepen.io/Enkelad/pen/OdPKbP
Посмотрел в одном из вопросов вариант перед min-height: 100% написать height: 100%, и проблему это решило, НО, если в блоке .content будет больше содержимого, то body и wrapper до конца не растягиваются, футер к низу не прижимается и получается вот такое чудо:
