absolu: le fond ne fonctionne pas

J'ai un code css.
pourquoi le "bottom: 0" ne fonctionne pas lorsque le "position: relative;"
si j'abandonne "position: relative;" vers le "bas" des œuvres, mais des "float: left" et "float: right" pas en "largeur: 930px;".
désolé mon mauvais anglais

<style type="text/css">
#main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
}

#right {
 position:absolute;
 right:0;
}

#bottom {
    position: absolute;
    bottom:0;
}
</style>

<div id="main">
    <div id="left">
        Left
    </div>
    <div id="right">
        Right
    </div>
    <div id="bottom">
        Bottom
    </div>
</div>

source d'informationauteur Thuong Nguyen

  1. 19

    C'est parce que lors de la configuration de position:relative sur principal, puis position:absolute sera relative à la société mère. Et votre #main div n'a pas de hauteur, ce qui provoque la #bottom de ne pas être au bas de la page.

  2. 1

    Ce n'est pas la voie à suivre, l'utilisation float pour ce type de mise en page.

    De revenir à votre question,

    bottom:0 fonctionne bien mais depuis votre principal ne dispose pas de hauteur, vous n'êtes pas le voir,

    Faire pour #main,

        #main
    {
        position: relative;
        width: 930px;
        padding:10px;
        margin:0 auto; 
        height:200px;
    }

    Modifier:

    Vous pouvez utiliser,

    #main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    position:absolute;
    left:0;
    top:0;
}

#right {
 position:absolute;
 right:0;
 top:0;
}

#bottom {
    left:0;
    position: absolute;
    bottom:-20px;
}

    mais je ne vais pas recommander ce ( je l'ai dit plus tôt cette disposition ne devrait pas être manipulé par float)
    absolute ne tient pas compte de position d'autres éléments, de sorte que ce code ne fonctionnera plus si #left a plus de hauteur.

    Si j'étais vous, j'aurais utilisé cette,

    #main {
    position: relative;
    width: 930px;
    padding:10px;
    margin:0 auto; 
}

#left {
    float:left;
}

#right {
  float:right;
}

#bottom {
    clear:both;
}