CSS - Comment faire le pied de rester au bas de la page?

la mise en page ici est un modèle pour mon site web http://jsfiddle.net/QvFV8/12/ comme vous pouvez le voir le contenu déborde le pied de page.

Il fonctionne très bien quand il n'y a qu'une petite quantité de contenu, qui est ce que je veux.
J'ai essayé d'effacer à la fois dans la 1ère section de pied de page, mais cela n'a pas d'effet

Comment peut être étiré pour que le pied reste au fond, quel que soit le montant de contenu (quelques pages auront plus ou moins de contenu que les autres)

<body> 
<div class="container">
    <div class="header">
        <div class="headerleft">
            <div class="headerleftcon">leftcon</div>
            </div>
        <div class="headerright">
            <div class="headerrightcon">rightcon</div>
            </div>
        <div class="header-content">Header
        </div>
    </div> 
    <div class="body">
        <div class="left-sidebar">
            <div class="left-content">left sidebar</div>
        </div>
        <div class="right-sidebar">
            <div class="right-content">right sidebar</div>
        </div>
        <div class="content">Content 1
        <div class="centerbox">
            <div class="centerboxcontent">Center box <br>  </div>
        </div>Content 2 <br> Content 2 <br>Content 2 <br>Content 2 <br>Content 2  
        bla bla bla
        </div>
    </div> 
    <div class="footer">
        <div class="footerleft">
            <div class="footerleftcon">botleftcon</div>
            </div>
        <div class="footerright">
            <div class="footerrightcon">botrightcon</div>
            </div>
        <div class="footer-content">Footer</div>
    </div>
</div> 
</body>

Le css est comme suit

html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;}
.header, .footer{
height: 80px;
background-color: #EFEFEF;
position: relative;}
.header-content{
padding: 20px;
text-align: center;}
.headerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.headerleftcon{
padding: 0px 0px 0px 0px;}
.headerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.headerrightcon{
padding: 0px 0px 0px 0px;}
.footer-content{
padding: 20px;
text-align: center;}
.container{
height: 100%;}
.body{
height: 100%;
margin-top: -80px;
margin-bottom: -80px;
background-color: #C7DFFA;} 
.content{
padding: 80px 0px 0px 0px;}
.left-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: left;
clear: both;} 
.right-sidebar{
height: 100%;
background-color: gray;
width: 50px;
margin-top: -80px;
margin-bottom: -80px;
float: right;}
.centerbox{
height:100px;
background-color: blue;}
.centerboxcontent{
padding:  0px 0px 0px 0px;} 
.right-content{
padding:  80px 0px 0px 0px;
text-align: right;}
.left-content{
padding:  80px 0px 0px 0px;} 
.footer{
clear:both;}
.footerleft{
height: 100%;
background-color: red;
width: 50px;
float: left;}
.footerleftcon{
padding: 0px 0px 0px 0px;}
.footerright{
height: 100%;
background-color: red;
width: 50px;
float: right;}
.footerrightcon{
padding: 0px 0px 0px 0px;}

OriginalL'auteur Christopher | 2013-04-16

css html

* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
.header, .footer {
height: 80px;
background-color: #EFEFEF;
}
.header-content {
padding: 20px;
text-align: center;
}
.headerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.headerleftcon {
padding: 0px 0px 0px 0px;
}
.headerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.headerrightcon {
padding: 0px 0px 0px 0px;
}
.footer-content {
padding: 20px;
text-align: center;
}
.container {
width: 100%;
min-height: 100%;
position: relative;
overflow: hidden;
}
.body {
background-color: #C7DFFA;
overflow: hidden;
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.content {
margin-right: 50px;
margin-left: 50px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 80px;
}
.left-sidebar {
background-color: gray;
width: 50px;
float: left;
}
.right-sidebar {
background-color: gray;
width: 50px;
float: right;
}
.left-sidebar, .right-sidebar {
margin-bottom: -30000px;
padding-bottom: 30000px;
}
.centerbox {
background-color: blue;
}
.centerboxcontent {
padding:  0px 0px 0px 0px;
}
.right-content {
text-align: right;
}
.left-content {
}
.footer {
clear:both;
position: absolute;
width: 100%;
left: 0px;
right: 0px;
bottom: 0px;
}
.footerleft {
height: 100%;
background-color: red;
width: 50px;
float: left;
}
.footerleftcon {
padding: 0px 0px 0px 0px;
}
.footerright {
height: 100%;
background-color: red;
width: 50px;
float: right;
}
.footerrightcon {
padding: 0px 0px 0px 0px;
}

Je vous remercie pour votre aide, très apprécié.

OriginalL'auteur yatanson

1

Je comprends que le pied de page d'un site web est un peu plus difficile que d'autre chose, mais je ne sais pas comment beaucoup plus de questions je dois voir à ce sujet, il s'agit tout simplement d'un appel pour l'apprentissage de la CSS, maintenant, ici, sont deux violons que j'ai fait avant pour la même question

Donc, ce que vous avez à faire est de vous assurer que votre pied de page est absolument dans le fond de votre récipient, de sorte à faire que vous avez besoin pour faire de votre conteneur position:relative; et 100% de la hauteur du contenu du récipient doit avoir un rembourrage en bas c'est la hauteur du pied de page . qui est-il vraiment

http://jsfiddle.net/eTwJh/2/ et en voici un qui n'a pas de contenu http://jsfiddle.net/eTwJh/3/

La double question est ici

Comment puis-je m'assurer que mon pied de page montre tout le chemin à la fin de la page plutôt que dans le milieu?

voici un exemple de code
```
  <!DOCTYPE html>
<html>
<head>
<title>My Amazing Footer</title>
<style>
html, body {
margin:0;
padding:0;
height:100%;
}
.wrapper {
min-height:100%;
position:relative;
}
footer{
background:#F1F1F1;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height:300px;
}
footer p{
text-align: center;
padding-top:100px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="Content">
<p>HTML Ipsum Presents</p>
</div>
<footer>
<p>&copy; My Website 2013. All Rights Reserved!</p>
</footer>
</div>
</body>
</html>
```
Je vous remercie pour votre aide.
Aucun, Problème Bonne Chance
Avez-vous testé dans IE7, IE8?
C'était près d'un an, je ne me souviens pas

OriginalL'auteur iConnor

Vous devez vous connecter pour publier un commentaire.