将CSS宽度设置为100％+缺少右边框？

Question

我将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>

Answer 1

您的案例中最简单的解决方法是：

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

Live Demo

• 删除width: 100%。
• 要使div填满屏幕，而是添加right: 0。

像我们在这里做的那样，给left和right（或top和bottom）这样的元素是完全可行的。

Answer 2

已经回答了，但我更喜欢这个解决方案。将其添加到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上不起作用，但不是很多。这里有更多关于：box-sizing support in IE7

Answer 3

有点相关的firefox bug 100％选择下拉菜单通常会缺少其右边框（取决于窗口的宽度） https://bugzilla.mozilla.org/show_bug.cgi?id=924068 除尝试宽度外没有其他解决方法：99％