Menu
I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.
I've seen a lot of tutorials on how to achieve this, using "position: absolute" + "bottom: 0" and stuff, but everything failed.
Check it out:
<html> <head> <meta charset="iso-8859-1" /> <link rel="stylesheet" type="text/css" href="index.css" /> <link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'> <title>Matheus's Page</title> </head> <body> <div id="wrapper"> <header> <div class="title-div"> <h1>Title</h1> </div> <nav> <ul> <li> <h3>Home</h3> </li> <li> <h3>Articles</h3> </li> <li> <h3>Perfil</h3> </li> <li> <h3>Settings</h3> </li> </ul> </nav> </header> <div id="body"> <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p> </div> <footer> <p>Footer</p> </footer> <div> </body> </html> CSS:
body { font-family: 'Arvo', serif; height: 100%; margin: 0; padding: 0; } #wrapper { min-height: 100%; } header { position: absolute; float: top; width: 100%; height: 8%; background-color: #424242; color: #FFD740; } .title-div { position: absolute; height: 100%; margin: auto 5%; padding-right: 3%; border-right: solid 2px #FFD740; } header nav { position: absolute; width: 75%; left: 15%; } header ul { list-style: none outside none; } header ul li { display: inline-block; margin: auto 2% auto 0; } #body { padding: 10px; padding-top: 8%; padding-bottom: 15%; /* Height of the footer */ } footer { position: absolute; width: 100%; height: 15%; right: 0; bottom: 0; left: 0; color: #FFD740; background-color: #424242; clear: both; } Link to printscreen of the result:
541
The best thing to do is to put your header,main content and your footer in a div tag as a place for your elements in a web page than put them in a it's normal flow like working on footer tag at end of the page.
The reason your footer is only halfway down the page with position: absolute is that you haven't set a min-height on the body and html elements. Without that, the body only takes up as much space as you have content for it -- and then the footer is aligned with that bottom, not the bottom of the window.
If you want to keep the footer at the bottom of the text (sticky footer), but keep it from always staying at the bottom of the screen, you can use: position: relative; (keeps the footer in relation to the content of the page, not the view port) and clear: both; (will keep the footer from riding up on other content).
The accepted answer might be a bit outdated since we have Flexbox now. Give the container a min-height: 100vh and the footer a margin-top: auto so you don't have to deal with absolute positioning and fixed heights.
body { margin: 0; } .container { display: flex; flex-direction: column; min-height: 100vh; } .header { background-color: #FFCCCC; } .content { background-color: #CCFFCC; } .footer { background-color: #CCCCFF; margin-top: auto; }<div class="container"> <div class="header">header</div> <div class="content">content</div> <div class="footer">footer</div> </div>I think this might help you.
Just showing you the way how to achieve what you want.
html, body { margin: 0; padding: 0; height: 100%; } #wrapper { min-height: 100%; position: relative; } #header { background: #ededed; padding: 10px; } #content { padding-bottom: 100px; /* Height of the footer element */ } #footer { background: #ffab62; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; }<div id="wrapper"> <div id="header"> </div> <!-- #header --> <div id="content"> </div> <!-- #content --> <div id="footer"> </div> <!-- #footer --> </div> <!-- #wrapper -->Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
Update:
JSFiddle Demo to play around.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
