HTML, CSS - Sticky footer displays over content on screen resize

问题

Please refer to my site [removed]

My footer displays at the end of the viewport as intended.

When the screen is resized vertically the footer will overlap everything above it.

How can this be avoided?

回答1:

Check out this sticky footer tutorial. The following code should be all you need.

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Edit:

Your negative value in your wrapper does not match the height of the footer. That is most likely part of your issue.

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    /* your old code: margin: 0 auto -4em;*/
    margin: 0 auto -83px;
}

footer {    
    background: url('images/foot_bg.jpg') center no-repeat,
    url('images/foot_liq_bg.jpg') repeat;
    position:absolute;
    bottom:0;
    width:100%;
    height:83px;
    min-width: 450px;
}

Edit:

You do not have the height set to 100% on the html and the body. Therefore, the body will only be set to 100% of its parent (html) which is not 100% of the browser. You must have the html's height set to 100% as well for it to work.

回答2:

It overlaps because you are giving it absolute positioning. You need to give it relative positioning to the rest of your content. Make your main content 100% height of the page, and put the footer underneath. Then apply a negative margin to the footer, which is the same amount of pixels as its height.

e.g. if the footer is height:100px; use margin-top:-100px;

Source: CSS Sticky Footer

回答3:

Don't worry, Sean. You're not too far off from getting it to work.

You need to change padding-bottom to margin-bottom on the body element, and take the absolute positioning off the footer element. Also, adding the 'push' div is necessary to get this method of sticky footer to work.

This jsFiddle should help, it works for me: http://jsfiddle.net/4vunq/

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Vault-X</title>
<!--JS enabling IE <=8 to recognise HTML5 elements-->
    <script type="text/javascript">
    document.createElement ('header')
    document.createElement ('footer')
    </script>
    <script type="text/javascript" src="javascript.js"></script>
    <link href="style_01.css" title="one" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="switchoff">
        <div id="wrapper">
            <header></header>
            <div id="switch">
                <a href="#" onClick="lightSwitch();">
                    <img src="http://www.vault-x.com/images/switch.jpg">
                </a>
            </div>
            <div id="content"><p class="switch">Hello World</p></div>
            <div class='push'></div>
        </div>
        <footer></footer>
    </div>
</body>
</html>

Relevant CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
footer, .push {
    height: 83px; /* .push must be the same height as "footer" */
}

Here you had padding-bottom instead of margin-bottom:

body {
    background:url('http://www.vault-x.com/images/body_bg.jpg') repeat-x;
    background-color: #000;
    margin-bottom:83px;
}

The bottom margin is important here too:

#wrapper {
    min-height: 100%;
    min-width: 450px;
    height: auto !important;
    height: 100%;
    margin: 0 auto -83px; /* bottom margin is negative value of footer's height */
}

And your footer code:

footer {
background: url('http://www.vault-x.com/images/foot_bg.jpg') center no-repeat,
url('http://www.vault-x.com/images/foot_liq_bg.jpg') repeat;;
        width:100%;
        height:83px;
        min-width: 450px;
}

That should just about do it. Nice looking site; and good luck! :)

回答4:

I added clear:both which resolved my issue with the overlapping.

#footer {
        position:relative;
        width:100%;
        height: 200px;
        background-color:#7B7168;
        margin-top: -200px;
        padding-bottom:50px;
        clear:both;
        }

来源：https://stackoverflow.com/questions/10319377/html-css-sticky-footer-displays-over-content-on-screen-resize

标签

html

css

footer