Redbull
2/22/2018 - 3:34 AM
Pressed to the bottom footer
Pressed to the bottom footer
* {
margin: 0;
}
html, body {
height: 100%;
}
body {
background: #ffffff;
color: #222222;
font-family: Arial, Helvetica, sans-serif;
}
.content, .header, .footer {
box-sizing: border-box;
padding: 20px;
width: 100%;
}
.header, .footer {
background: #008080;
color: #ffffff;
}
.content p {
margin: 10px 0;
font-size: 16px;
line-height: 1.8;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="footer.css">
</head>
<body>
<div class="header">Приклеенный к низу футер</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate architecto beatae nesciunt odio rem eligendi ea eum illum aut alias, pariatur laudantium impedit, maxime voluptate obcaecati voluptatum sint. Impedit, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate architecto beatae nesciunt odio rem eligendi ea eum illum aut alias, pariatur laudantium impedit, maxime voluptate obcaecati voluptatum sint. Impedit, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate architecto beatae nesciunt odio rem eligendi ea eum illum aut alias, pariatur laudantium impedit, maxime voluptate obcaecati voluptatum sint. Impedit, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate architecto beatae nesciunt odio rem eligendi ea eum illum aut alias, pariatur laudantium impedit, maxime voluptate obcaecati voluptatum sint. Impedit, tempora!</p>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</body>
</html>