Problems with CSS sticky footer
I am trying to implement a CSS sticky footer.
The issue is there is a content DIV that is extending beyond its container causing scroll bars that are not desirable and the background-image hung off the page div does not extend the full height of the document.
Here is my HTML:
<div id="page">
<div id="header">
<dl>
<dt>Header links -</dt>
<dd><a href="#">link 1</a></dd>
<dd><a href="#">link 2</a></dd>
<dd><a href="#">link 3</a></dd>
</dl>
</div>
<div id="content">
<p><a id="modal" href="popup.html" target="_blank">link to popup</a></p>
</div>
<div id="footer">
<dl>
<dt>Footer links -</dt>
<dd><a href="#">link 1</a></dd>
<dd><a href="#">link 2</a></dd>
<dd><a href="#">link 3</a></dd>
</dl>
</div>
</div>
And here is the C开发者_如何学JAVASS:
/*--------------------------------------------------------------- global */
html,
body {
color:#969696;
font-size:100%;
height:100%;
}
body {
font:normal 200 70% Arial, Helvetica, Verdana, sans-serif;
}
a,
a:link,
a:visited,
a:hover,
a:active {
border-bottom:1px dashed #ff8400;
color:#ff8400;
text-decoration:none;}
a:hover {
border-bottom-style:solid;}
/*--------------------------------------------------------------- layout */
#page {
background:url("../images/bgMain.jpg") repeat-y center top;
height:100%;
margin:0 auto;
position:relative;
width:1024px;
}
dl,
dt,
dd {
float:left;
}
dd {
margin:0 .2em 0;
}
dd:after {
color:#969696;
content:"|";
padding:0 0 0 .3em;
}
dd:last-child:after {
content:"";
}
/*----------------- header */
#header {
margin:0 auto;
width:726px;
}
#header dl {
float:right;
line-height:60px;
}
/*----------------- content body */
#content {
background:#fff;
border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
-moz-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
-webkit-box-shadow:0 0 12px 0 rgba(0, 0, 0, .1);
clear:both;
height:100%;
margin:0 auto;
min-height:100%;
padding:16px 13px 22px;
position:relative;
width:700px;
}
/*----------------- footer */
#footer {
clear:both;
margin:-22px auto;
position:relative;
width:726px;
}
#footer dl {
display:inline;
margin:0 0 0 13px;
}
#footer a,
#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
border-bottom-color:#969696;
color:#969696;
}
The fantastic CSS Tricks website has, in their Snippets area a snippet for a Sticky Footer
http://css-tricks.com/snippets/css/sticky-footer/
or using jQuery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
latest link with demo
Modern Clean CSS “Sticky Footer” from James Dean
HTML
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<nav></nav>
<article>Lorem ipsum...</article>
<footer></footer>
</body>
</html>
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%;
}
Demo here
Apparently you need to change your rules for the #footer to include a defined height, and then a negative margin-top rule with a value equal to your defined height.
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I wrote a very clean CSS footer a couple days ago, you could find it useful.
http://mystrd.at/modern-clean-css-sticky-footer
You will find on this github repository (Bredele css sticky footer) two versions of sticky footers : one with a header and an other one without.
Both these versions use display:table (works with IE8) with no extra markups, no clearfix and a flexible content height. Moreover, the header height doesn't depend on the content padding or a relative viewport!
Hope it'll be helpful!
Olivier
Get rid of the scrollbars by using
overflow: hidden
on the container where they appear.
Use the following style for the footer:
#footer{position:absolute;bottom:0}
This will put it at the bottom of the screen at all times, if you want it at the bottom of <div id="page"> add
#page{position:relative}
What about when you don't know the height of the footer, such as with a responsive layout? Is the only option to use JavaScript and window.onresize?
You can use this style:
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0 0 8rem 0;
min-height: 100%;
position: relative;
}
.myFooter {
position: absolute;
bottom: 0;
right: 0;
left: 0;
width: 100%;
padding: 0 8rem;
}
There is a very helpful CSS trick that will always stick your footer to the bottom, even if the content height is lower than the height of the viewport.
See HTML code below:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<div class="content"> </div>
<footer>© 2016</footer>
</body>
</html>
See CSS code below:
body {
margin: 0; /* If not already reset */
}
.content {
min-height: calc(100vh - 20px);
}
footer {
height: 20px;
}
In your case I would wrap the nav and article in a "content" div. And give it a min-height value of calc(100vh - 100px).
Here is the article source: Sticky CSS Footer
Use FlexBox
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
with this I resolved all the problem with the footer with a not full content page.
Easy as all in this world!, you only need to stick to the bottom...
Use this next code:
//This is jus't a stupid detail
//So, don't take much importance!
const text = document.getElementById('footer');
text.onmouseover = function(){
text.style.color = "red";
}
text.onmouseleave = function(){
text.style.color = "white";
}
while (e = true){
text.innerText = "Hello!";
setTimeout(function(){
text.innerText = "I love coding";
setTimeout(function(){
text.innerText = "Codede by INovomiast";
}, 1500);
},1500);
}footer{
background-color: rgb(0,0,0,0.5);
width: 100%;
color: white;
bottom: 0;
position: absolute;
}<html>
<body>
<h1>PAGE CONTENT</h1>
<footer>
<center>
<h1 id='footer'>FOOTER!</h1>
</center>
</footer>
</body>
</html>
加载中,请稍侯......
精彩评论