width: 100% with position: absolu (css)

Si vous n':

<div style="width:auto;background:red;color:white">test</div>

Vous obtenez un div qui est étirée pour remplir l'ensemble de la largeur de l'écran (100%).

C'est ce que j'ai besoin d'arriver.

Cependant, j'ai aussi besoin de la position de départ pour être ensemble.. Donc j'ai besoin de position:absolute.

Quand j'ajoute de la position:absolute, la largeur de la div est aussi large que le contenu à l'intérieur.. (Similaire à flotteurs). Est-il un moyen de contourner cela?

Je ne peux pas il suffit de préciser width:100% car cela ne tiennent pas compte des frontières tailles, etc..

Grâce,
Wesley

source d'informationauteur Wesley

  1. 21

    Quand j'ajoute de la position:absolute, la largeur de la div est aussi large que
    le contenu à l'intérieur.. (Similaire à flotteurs). Est-il un moyen de contourner
    cette?

    Je ne peux pas il suffit de préciser width:100% puisque cela ne permet pas de prendre en
    compte frontière tailles, etc..

    Vous pouvez utiliser position:absolute; left:0; right:0; top:0.

    Comme ceci: http://jsfiddle.net/thirtydot/yQWGV/

  2. 3

    Vous pouvez utiliser width:100% et l'attribut css box-sizing, pour obtenir le modèle de boîte de travail comme IE 5.5, c'est à dire de rembourrage et de la frontière pris en compte dans la largeur.

    div.absolute {
    width: 100%;
    border: 5px solid #000;
    background-color: #F00;
    position: absolute; top: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 50px;
}

    Ici un violon: http://jsfiddle.net/dJtm2/

    Méfiez-vous cependant, car il est relativement nouveau CSS3 attribut et ne fonctionne que sur les navigateurs récents, et comme vous pouvez le voir dans mon exemple nécessite la terrible contre-productif mesure qui est le fournisseur de préfixes.

  3. 3

    simplement écrire comme ceci:

    div.absolute {
    border: 5px solid #000;
    background-color: #F00;
    position: absolute;
    top: 100px;
    padding: 50px;
    left:0;
    right:0;
}

    http://jsfiddle.net/dJtm2/1/

    dans ce padding & border de ne pas augmenter la largeur de l'élément.