Why does footer not go all the way to the bottom?_问答_开发者

Why does footer not go all the way to the bottom?

开发者 https://www.devze.com 2022-12-18 14:32 出处：网络

I have a web page as follows: http://www.transeeq.com/health/bq17a.html# The yellowish footer does not get pushed all the way to the bottom. Any ideas? Here is the CSS code:

相关专题：css

I have a web page as follows: http://www.transeeq.com/health/bq17a.html#

The yellowish footer does not get pushed all the way to the bottom. Any ideas? Here is the CSS code:

#contain开发者_如何学运维er {
   min-height:100%;
   position:relative;
}

#body {
   padding-bottom:60px;   /* Height of the footer */
}

#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;          /* Height of the footer */
   background:#CCCC66;
}

It works; your CSS is probably being cached locally. Have you done a forced browser refresh lately? Hit Ctrl+F5.

Try the CSS code to achieve a "sticky footer" (per http://ryanfait.com/sticky-footer/).

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

I use this css.

* {
       margin: 0;
}
html, body {
       height: 96%;
}
.wrapper {
       min-height: 96%;
       height: auto !important;
       height: 96%;
       margin: 0 auto -4em;
}
.footer, .push {
       height: 4em;
}

And you can use it in your html page like this

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

It works very well in IE AND Firefox

I just tested it; it extends to the bottom in Chrome, Firefox, Opera, Safari, IE8, IE7, and even IE6. In which browser do you experience this problem, and can you describe your problem in more detail?

have you tried floating the footer to the bottom and changing the position to relative?

You have "height: 60px;" in #footer. Try making that a smaller number in the .css.

Put your footer inside the container div - if you want to have the footer at the bottom of the page (not the bottom of a window) using position:absolute, you need to put it in a relatively positioned div, such as your container.

Have a look at this article

Try position: fixed on the footer instead if you want to ensure that it's always at the bottom of the window. Otherwise, to ensure it's always at the bottom of the document, you can keep its position as relative/auto.