web-dev-qa-db-fra.com

Définir la largeur CSS à 100% + la bordure droite est manquante?

J'ai défini la largeur d'une div à 100% de la fenêtre. Lorsque j'applique une bordure à cette div, la bordure droite est coupée. Dois-je effectuer un piratage du modèle de boîte à cela?

#textBoxContainer {
  width:100%;
  height:30%;
  position:fixed;
  z-index:99;
  bottom:0px;
  left:0px;
  background-color:#999;
  border: 4px solid #000;
}
<div id="textBoxContainer"></div>
cssborderhtml
27
worked

La solution la plus simple dans votre cas est la suivante:

#textBoxContainer {
    height: 30%;
    position: fixed;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #999;
    border: 4px solid #000;
}
<div id="textBoxContainer"></div>

Démo en direct

  • Retirer width: 100%.
  • Pour que div remplisse l'écran, ajoutez plutôt right: 0.

Il est parfaitement viable de donner à un élément à la fois un left et un right (ou un top et un bottom), comme nous le faisons ici.

24
thirtydot

On a déjà répondu, mais j'aime mieux cette solution. Ajoutez ceci à textBoxContainer:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

Il mettra la bordure à l'intérieur de la boîte. Plus d'informations: http://css-tricks.com/box-sizing/

Modifier - Ne fonctionne pas sur IE7, mais pas beaucoup. Voici plus à ce sujet: prise en charge du dimensionnement des boîtes dans IE7

41
d_rail

Bug Firefox un peu lié
Une liste déroulante de sélection à 100% manquera souvent de sa bordure droite (en fonction de la largeur de la fenêtre)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
Pas d'autre solution que d'essayer la largeur: 99%

1
Brad Kent