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上不起作用，但不是很多。这里有更多内容：box-sizing support in 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>

Live Demo

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

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

Answer 3

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

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

3 个答案: