web-dev-qa-db-fra.com

Largeur: 100% sans barres de défilement

J'essaie de créer une partie de ma page Web qui corresponde à la largeur du navigateur. Pour cela, j'utilise width: 100%, le problème est qu'elle affiche des barres de défilement et que je ne peux pas utiliser overflow-x: hidden; car cela masquerait une partie du contenu , alors comment je peux résoudre ce problème?

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;
    margin-left: 10px;
    padding: 0;
    -webkit-user-select: text;
}
csslayoutwidthoverflow
24
Nathan Campos

Parce que vous utilisez position: absolute, au lieu d'utiliser:

width: 100%; margin-right: 10px; margin-left: 10px

tu devrais utiliser:

left: 10px; right: 10px

Cela rendra votre élément prendre toute la largeur disponible, avec 10px espace à gauche et à droite.

30
thirtydot

Vous devez supprimer la margins sur l'élément #news

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-right: 10px;  /*REMOVE THIS*/
    margin-left: 10px;   /*REMOVE THIS*/
    padding: 0;
    -webkit-user-select: text;
}

Si cela ne fonctionne pas, vous pourriez avoir margin et padding définis sur l'élément lui-même. Votre div - si c'est ce que vous utilisez - pourrait se voir appliquer des styles, dans la feuille de style ou dans le style de base du navigateur. Pour les supprimer, définissez les marges spécifiquement sur 0 et ajoutez également !important.

#news {
    list-style-type: none;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin: 0 !important; 
    padding: 0 !important;
    -webkit-user-select: text;
}
2
Jason Gennaro

J'ai eu un problème similaire avec un élément positionné absolu, et je voulais utiliser la largeur 100%. C'est l'approche que j'ai utilisée et qui a résolu mon problème:

box-sizing=border-box

Sinon, j'ai toujours eu un peu de contenu et de bourrage au-delà de la barre de défilement.

1
Michael Sefranek

Il semble que vous ayez défini la largeur à 100%, mais il existe également des marges qui obligent la largeur à s’étendre au-delà.

Essayez googler pour les "schémas flexibles css (à deux/trois colonnes)".

Voici un exemple

<div id="cont">
   <div id="menu"></div>
   <div id="main"></div>
   <div class="clear"></div>
</div>

et le css

#menu{
  float:left;
  height:100%;
  width:200px;
}
#main{
  padding-left:200px;
}
.clear{clear:both;}

Le #menu div sera aligné à gauche et aura une largeur statique de 200px. Le #main div commencera en dessous de #main, mais à cause de son 200px padding (peut également être une marge), son contenu et ses éléments enfants commenceront - où #menu se termine.

Nous ne devons pas définir #main sur un pourcentage de largeur (par exemple 100%), car les 200 pixels de remplissage à gauche seront ajoutés à cela, et casserons la mise en page en ajoutant des barres de défilement à l'axe X.

1
Pantelis

La réponse est que vous avez défini des marges qui rendront la division plus large que le 100%; d'où les barres de défilement.

Si vous pouvez vous débarrasser des marges, faites-le! Cependant, vous voudrez souvent les marges. Dans ce cas, placez le tout dans un conteneur div et définissez les marges sur 0 avec une largeur de 100%.

0
natedavisolds