Footer won't stay in the bottom of the page

问题

I'm am having some trouble, trying to get my footer to stay at the bottom of my page and the only tutorials I can find has a fixed position, which I dont want it to. I just want the footer to stay at the bottom of the page, so if the copyright line is at 1000px down on the page, that is where the footer will be. Right now it is at the top of the page, right under the header which it isn't supposed to.

My code (html):

<body>
    <div id="footer">

            <div class="CopyrightLine">
            &copy; Copyright
            </div>

        </div>
</body>

My code (css):

    #footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    float: left;
    bottom: 0;
}

EDIT:

I have now changed the code to look like this.

    #footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    bottom: 0;
    position: absolute;
}

.CopyrightLine{
    position: relative;
    left: 50%;
    margin-left: -70px; /*half the image width*/
    color: #ffffff;
}

But it still wont work, even though I make alot of text on top, to try and make it move.

回答1:

You could use absolute position on the footer with some tricks as follows.

http://jsfiddle.net/a5q2u4bv/1/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 150px;
}
footer {
    background: silver;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 150px;
}

<body>
    <main>main</main>
    <footer>footer</footer>
</body>

回答2:

1: Why do you have it floated? float: left can be easily removed if it doesn't have any purpose. Floating could also cause problems with positioning, and be the reason that it doesn't work.

2: The bottom property only works when the element is something other than position: static. If it's not specified, it's position: static by default. position: absolute is probably what you want.

3: Does your site have a vertical scrollbar yet (so much content so that you could scroll it)? If you add more content to the site so that there becomes a scrollbar on the site and your footer code is the farthest down in the HTML, it will probably be at the bottom without specifying anything more. Demo: http://fiddle.jshell.net/j1hhc98v/2/

回答3:

Never mind, I fixed it my self, I will leave the code here if anyone has the same problem.

html part:

<body>

        <div id="header">

        </div>

        <div id="container">

        <div id="content">

        </div>

        </div>

        <div id="footer">

        </div>


</body>

css part:

body {
    padding:0;
    height:100%;
}

body > #container {
    height: auto; 
    min-height: 100%;
}

html {
    height:100%;
}   

#footer{
    width: 100%;
    height: 200px;
    background-color: #000000;
    z-index: 10;
    margin-top: 1000px;
    position: relative;
    clear: both;
}

#content{
    padding-bottom: 200px;
}

#container{
    height:100%;
}

#header {
    width: 100%;
    height: 200px;
    background-color: #000000;
    float: left;
    position: relative;
}