Problems with CSS sticky footer

2019-01-01 09:19发布

站内文章 / HTML/CSS
45 0 0

问题:

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 CSS:

/*--------------------------------------------------------------- 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;
}

回答1:

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



回答2:

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



回答3:

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/



回答4:

I wrote a very clean CSS footer a couple days ago, you could find it useful.

http://mystrd.at/modern-clean-css-sticky-footer



回答5:

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



回答6:

Get rid of the scrollbars by using

overflow: hidden

on the container where they appear.



回答7:

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}


回答8:

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?



回答9:

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;
}


回答10:

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\">&nbsp;</div>
  <footer>&copy; 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



标签： html css xhtml
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~