Menu
I'm using a "sticky" footer, but on a couple of pages it overlays the content. Is there any way to prevent this from happening, but retaining it's "sticky" quality?
I tried using min-height: on HTML and body, but that didn't work.
CSS:
html { background: black url(images/bg2.jpg) no-repeat 200px center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; } body { margin: 0; height: 100%; padding-left: 40px; padding-top: 25px; } #container { min-height: 100%; position: relative; height: 100%; min-width: 900px; overflow: hidden; } #body { padding-bottom: 100px; float: left; background-color: rgba(0,0,0,0.7); width: 750px; height: 400px; } #footer { position: absolute; bottom: 0px; width: 100%; height: 100px; } HTML:
<body> <div id="container"> <div id="header"> <div class="logo">C</div> <ul class="main_nav"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="music.html">Music</a></li> <li><a href="services.html">Services</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="contact.html">Contact</a></li> </ul> </div> <div id="body"> <div id="bio_wrapper"> </div> </div> <div id="footer"> <span class="footer_text">Copyright © 2013<br />All Rights Reserved.</span> </div> </div> </body> 
990
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).
position: fixed; bottom: 0 and this one. This solution is the best because the footer does not stick to the bottom, but stays at the end of the scrollable page. to build on your answer, you can look at it another way by setting the . footer {max-height: calc(100vh+40px); position: absolute} .
As amit said, you should put a margin-bottom for your body and use min-height instead of height:
body { min-height: 400px; margin-bottom: 100px; clear: both; } And you should remove height:100% from <body>
Hope this helps!
79
If your body div closed before footer div start then use margin-bottom property. Example if the page structure is
<div id="body"> </div> <div id="footer"> </div> then write
#body{ margin-bottom: (height of your footer); } If your code structure is not like that. I mean your footer div is inside body div. Then use that margin bottom property to the div which close just before footer div start.
37
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
