web-dev-qa-db-ja.com

CSSの幅を100％に設定します+右の境界線がありませんか？

Divの幅をウィンドウの100％に設定しました。このdivに境界線を適用すると、右側の境界線が切り取られます。これに対してボックスモデルハックを実行する必要がありますか？

#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

あなたのケースで最も簡単な修正はこれです：

#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>

ライブデモ

  • width: 100%を削除します。
  • divを画面いっぱいに表示するには、代わりにright: 0を追加します。

ここで行っているように、leftとright（またはtopとbottom）の両方を要素に与えることは完全に現実的です。

24
thirtydot

既に回答済みですが、このソリューションの方が好きです。これをtextBoxContainerに追加します。

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

箱の内側に枠をつけます。詳細： http://css-tricks.com/box-sizing/

編集-IE7では機能しませんが、あまり機能しません。詳細は次のとおりです。 IE7でのボックスサイズのサポート

41
d_rail

やや関連するFirefoxのバグ
100％選択ドロップダウンの右側の境界線が欠落することがよくあります（ウィンドウの幅によって異なります）。
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
幅を試す以外に回避策はありません：99％

1
Brad Kent