Html 将 CSS 宽度设置为 100% + 缺少右边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5128155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set CSS width to 100% + right border is missing?
提问by worked
I set a div's width to 100% of the window. When I apply a border to this div, the right border is cut off. Do I have to perform a box model hack to this?
我将 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>采纳答案by thirtydot
The easiest fix in your case is this:
在您的情况下，最简单的解决方法是：
#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>- Remove
width: 100%. - To make the
divfill the screen, instead addright: 0.
- 删除
width: 100%。 - 要
div填充屏幕，请添加right: 0.
It's perfectly viable to give an element both a leftand a right(or a topand a bottom), like we're doing here.
像我们在这里所做的那样，同时赋予一个元素 aleft和 a right（或 atop和 a bottom）是完全可行的。
回答by d_rail
Already has been answered, but I like this solution better. Add this to textBoxContainer:
已经回答了，但我更喜欢这个解决方案。将此添加到 textBoxContainer：
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
It will put the border on the inside of the box. More info: http://css-tricks.com/box-sizing/
它将把边框放在盒子的内侧。更多信息：http: //css-tricks.com/box-sizing/
Edit - Doesn't work on IE7, but not much does. Here's more on that: box-sizing support in IE7
编辑 - 不适用于 IE7，但作用不大。这里有更多关于：IE7中的box-sizing support
回答by Brad Kent
Somewhat related firefox bug
A 100% select dropdown will often be missing its right border (dependent on width of window)
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
No workaround other than to try width: 99%
有点相关的 firefox 错误
100% 选择下拉列表通常会丢失其右边框（取决于窗口的宽度）
https://bugzilla.mozilla.org/show_bug.cgi?id=924068
除了尝试宽度之外没有其他解决方法：99%
