web-dev-qa-db-fra.com

100% la largeur DIV n'est pas vraiment 100%

Quand j'ai un <div> avec width: 100%, ce n'est pas vraiment 100%:

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

Maintenant, lorsque vous redimensionnez la fenêtre, il y a donc une barre de défilement horizontale et que vous faites défiler vers la droite, l'arrière-plan disparaît. Comment puis-je rester le fond dans ce cas?

Ici, vous pouvez voir le problème en action: http://beta.ovoweb.net/?i=3

Désormais, lorsque vous redimensionnez la fenêtre et faites défiler vers la droite, vous ne pouvez plus voir l'arrière-plan. Comment régler ceci?

csshtmlscrollwidth
22
www.data-blogger.com

La valeur 100% correspond à 100% de la largeur du parent ou du port d'affichage. Voir la documentation .

19
James Sumners

Largeur: 100%, est fortement affectée par ses marges et le rembourrage de son parent (corps dans votre cas). SO, les réinitialiser d'abord

Quelque chose comme

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

17
Starx

ajoutez ceci au css:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

Alors ça devrait marcher.

5
Arda

100% ne représente que 100% de la largeur disponible, en fonction du conteneur parent. Ainsi, si vous créez un DIV de 500 pixels de largeur, puis imbriquez un autre DIV avec une largeur de 100%, votre DIV à 100% peut s’étendre à un maximum de 500 pixels (sans compter les marges ni les marges, il est donc nécessaire de les remettre à 0).

2
Dan

Cela doit être fait (ajoutez cette ligne tout en haut de votre fichier CSS):

* { margin: 0; padding: 0; }

Ça marche tout le temps pour moi.

2
shane

la plupart du temps, j'ajoute ce morceau de code à mes CSS Cela devrait fonctionner pour vous aussi. oui, 100% largeur ou hauteur est toujours basée sur le conteneur parent.

CSS

*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
}


#container{
width:100%;
height:100%;
background:gray;
position:relative;
display:block;
}
#content{
height:50px;
width:50px;
bottom:20px;
right:10%;
background:red;
position:absolute;
}

HTML

<div id="container">
    <div id="content">
    </div>
</div>​

SORTIE

enter image description here

1
GaurabDahal

Dans mon cas, la balise div n'occupe pas 100% de la balise parent car la div affiche "inline". Le changer en "inline-block" corrigea ce problème.

0
James in Indy