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

-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中的盒子大小支持

Answer 2

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

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

给a left和a right(或a top和a bottom)这样的元素是完全可行的,就像我们在这里做的那样.