将页脚贴到身体div的底部

Question

I'd like to know how I can stick my footer.php to the bottom of the body div.

Here is what I'd like: http://prntscr.com/5ja375

Like I want it to be under the #base div any time. That means if I type in a long paragraph, it's still gonna be under the base.

Now here are the files:

style.css

/*Base Debut*/
#base {
    background-color:white;
    height:auto;
    width:1000px;
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 80px;
}
/*Base Fin*/

/*Footer Debut*/
#foot {
    padding: 5px;
    margin: auto;
    background-color: #303030;
    width: 1000px;
    color: #7A7A7A;
    font-family: OswaldL;
    font-size: 14px;
    text-align: center;
}

#foot .under {
    background-color: #2B2B2B;
    width:1000px;
    height:10px;
}
/*Footer Fin*/

footer.php

<br /><br /><br /><br /><br />

            </div>
            </div>
            </div>

        <div id="foot">

            <?php echo'NOM_SITE;'?> © | Lorem ipsum <a href="#">dolor</a> et <a href="#">sit</a> | amet<br />
            <a target="_blank" href="/mobile">Lorem ipsum</a>


        <div class="under">
        </div>
        </div>
        <br />
    </body>
</html>

index.php

<?php include 'head.php'; ?>
<div clas="wrap">
<div id="base">
Welcome to <?php echo NOM_SITE; ?> $date <?php echo date("d/m/Y") ?>
</div>
</div>
<?php include 'footer.php'; ?>

Thank you :)

Answer 1

If you want the footer sticks at bottom of your body, you need to set the body with position: relative; and then footer with position: absolute; bottom: 0.

 #base { position: relative; z-index: 1; } footer { position: absolute; bottom: 0; z-index: 2; } 

And then, the HTML should be:

 <div id="base"> your base content <footer> footer content </footer> </div>