I'm having a problem with my site http://artygirl.co.uk/pixie/about/ I can't seem to get the footer to automatically stick to the bottom of the browser, and show the rest of my background. Is there a solution better than using position:fixed or absolute?
I think there are possibly other styles over-riding some tests I do in firebug.
Thanks for your help Regards Judi
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
CSS:
.podbar {
bottom:0;
position:fixed;
z-index:150;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+
(document.documentElement.clientHeight-this.offsetHeight)));
height:35px;
}
HTML:
<div class="podbar">
Put your footer here
</div>
This will create a sticky that will always appear at the bottom of the page and overlay everything. Just add extra margin/padding to the bottom of your main container divs equal to the height of footer +5px so it doesn't overlay your content.
Works in pretty much every browser I have tested.
I've used the technique in this article before: CSS layout: 100% height with header and footer. It does require some extra markup in your HTML.
This is always a bit difficult, you could increase the min-height of your content area, but even then if someone has a really big screen you'd see the same thing.
You could use a bit of JavaScript to increase the min-height if someone has a huge viewport but that's still less than elegant. I'm not sure if there is a CSS-only solution to this.
If you want to try the above the code I just posted here: Is detecting scrollbar presence with jQuery still difficult? may be of use to you.
Set the height of html and body to 100%, insert a container div with min-height 100% and relative position, and nest your footer with position: absolute, bottom: 0;
/* css */
html, body {
height: 100%;
}
#container {
min-height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
<!-- html -->
<html>
<head></head>
<body>
<div id="container">
<div id="footer"></div>
</div>
</body>
</html>
Here you have an example and explanation http://ryanfait.com/sticky-footer/
Edit: Since that site is offline, here is another example of this working: https://gist.github.com/XtofK/5317209 and https://codepen.io/griffininsight/pen/OMexrW
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('nav');* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
border: 1px solid #ff00ff;
height: 50px; /* '.push' must be the same height as 'footer' */
}
footer {
}<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>You could set a min-height on #content. This won't fix the footer to the bottom of the browser specifically, but will ensure that you can always see a certain amount of the background.
As an alternative, using JavaScript, you could determine the height of the browser window and then calculate the min-height for #content, and apply it using JavaScript. This would ensure the footer is always in the correct place.
I've figured it out. Html had a css property for the background saying the colour white.
I always prefer page wise footers because of variable content on pages. I use a top margin of 5em for my footers. Most often than not, we know the height of content that can occur on pages.
If you use the Compass library for Sass, there is also another option. You can use Compass’s sticky-footer mixin (demo). It requires that the footer be fixed-height, and that your HTML has a certain general structure.
Don't use position:absolute use position:relative instead.
.footer {
z-index:99;
position:relative;
left:0;
right:0;
bottom:0;
}
position: absolute will stick it to the bottom of the screen while position relative won't ignore other divs, so it will stay at the bottom of the full page.
© 2022 - 2024 — McMap. All rights reserved.