Как прижать футер к низу страницы, в тоже время, чтобы центральный блок растягивался до футера независимо от контента?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="headerr">
<div class="container">
<div class="header"></div>
</div>
</div>
<div class="mainn">
<div class="container">
<div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium id eius maxime at repellat beatae velit suscipit tempore, molestiae atque culpa ducimus perspiciatis pariatur hic doloribus perferendis, delectus illum cum fugit. Voluptatem ratione dignissimos error consequuntur, explicabo et quisquam ipsum, pariatur fugiat porro maiores, possimus laudantium eveniet cupiditate cum iure sit laboriosam sunt repellendus! Dignissimos architecto dolore eius odit, rerum minus deserunt, in. Quasi placeat molestias in ipsum itaque, ex laborum illo a aspernatur pariatur dignissimos alias aliquam, consequuntur corporis.</div>
</div>
</div>
</div>
<div class="footerr">
<div class="container">
<div class="footer"></div>
</div>
</div>
</body>
</html>
Хоть футер и прижимается, но центральный блок не растягивается + при растягивании помощника разработчика (f12) футер бегает вместе с ним
* {
padding: 0px;
margin: 0px;
}
html,
body{
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto;
margin: -80px auto 0;
}
.headerr {
height: 80px;
background: red;
padding-top: 80px;
}
.container {
width: 940px;
margin: 0 auto;
}
.header {
height: 80px;
background: #000;
}
.mainn {
min-height: 100%;
background: yellow;
}
.main {
background: blue;
}
.footerr {
background: green;
}
.footer {
height: 80px;
background: #ccc;
}