Futher and central unit
-
How do you put a futer on the bottom of the page at the same time that the central block stretches to the futher regardless of the content?
<!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>At least the futer's tight, but the central block doesn't stretch + when the assistant developer stretches (f12), the futer runs with it.
* { 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;
}
-
It's just positioning.
body { margin: 0; position: relative; }.wrapper {
height: 100%;
width: 100%;
background-color: yellow;
}.footer {
position: absolute;
width: 100%;
bottom: 0;
background-color: green;
}<body>
<div class="wrapper">
ваш сайт
</div>
<div class="footer">
ваш футер
</div>
</body>The browser will look good. In case of contents
wrapperMore windows,footerIt's gonna move if you're less, to push to the bottom of the screen. If you need tofooterI've always been on the screen to replace him.position: absolute;♪position: fixed;
