CSS & HTML5: Position a <footer> at the bottom of the page? no wrapper?
the age-old problem. I need to position a <footer> Element at the bottom of the page. However i don't have a wrapper div.
I'm do have the following stucture…
<body>
<h开发者_运维百科eader>
<section id="content">
<footer>
</body>
Is there an easy way to push the footer to the bottom if the content is not high enough?
Came by this question, and thought I'd post what I've come across. Seems like the ideal way to me.
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
HTML5:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
All credit goes to http://mystrd.at/modern-clean-css-sticky-footer/
Make it position: fixed; bottom: 0, height: xxx? Of course, then it'd overlap any content should the page actually go past the bottom of the window. Perhaps some JS to detect "short" content and set css as appropriate.
Depending on your code this may not work, but I'd suggest setting your body to position:relative; and then setting the footer to position:absolute; and bottom:0. In theory it won't overlap things then.
AFAIK this is still the best way to get a footer to stick to the bottom of the page:
http://www.themaninblue.com/experiment/footerStickAlt/
i had made a jsfiddle before, check out this http://jsfiddle.net/kuyabiye/K5pYe/ try resizin the result window, if the content will overflow the scroll will be seen.
Here is a solution that works great for me. Sticky to bottom, no overlap with content, no need for a wrapper.
https://jsfiddle.net/vq1kcedv/
html:
<!DOCTYPE html>
<head>
<title>Footer</title>
</head>
<body>
<nav>Link1 Link2</nav>
<article>content</article>
<footer>Copyright</footer>
</body>
</html>
css:
html, body {
position: absolute;
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
body:after {
line-height: 100px; /* height of footer */
white-space: pre;
content: "\A";
}
footer {
position: absolute;
width: 100%;
height: 100px; /* height of footer */
bottom: 0px;
margin-top: -100px; /* height of footer */
}
Check out the Fiddle
HTML
<header>
</header>
<section id="content">
</section>
<footer>
</footer>
CSS
body {
height: 100%;
}
footer {
width: 100%;
height: 200px;
}
jQuery
$(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
$(window).resize(function() {
var footer = $('footer'),
footHgt = $('footer').outerHeight(),
bodyHgt = $('body').height();
footer
.css({
position: 'absolute',
left: '0',
top: bodyHgt - footHgt + 'px'
});
});
});
I know it's an old post but I wanted to provide my own solution (with javascript) :
/* css */
footer { width:100%; bottom:0; }
/* javascript */
if ($("body").height() < $(window).height()) {
document.querySelector('footer').style = 'position:absolute;'
}
It should work with any kind of footer of any size.
EDIT : alternative solution ( no need for css) :
/* footer */
if ($("body").height() < $(window).height()) { /* if the page is not long enouth, let's put some more margin to the footer */
var height = $(document).height() - $("body").height();
document.querySelector("footer").style.marginTop = height + "px";
}
加载中,请稍侯......
精彩评论