我正在使用Firefox，想要创建一个高度和宽度为100%的div，白色边框为10px。边框的右侧和底部似乎在div 和正文之外。
https://jsfiddle.net/tob6g805/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 10px;
border-color: #ffffff;
border-style: solid;
}
解决方法是添加边框的右侧和底部，并减小div 的宽度和高度... 但这在调整页面大小时变得特别成问题。
https://jsfiddle.net/1wtjkybm/
html {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: #ffb0a3;
overflow: hidden;
}
.div-with-border {
width: 95%;
height: 95%;
margin: 0px;
padding: 0px;
border: 10px;
border-bottom: 100px;
border-right: 100px;
border-color: #ffffff;
border-style: solid;
}
感谢您的任何帮助。
默认情况下，在 CSS 框模型中，您分配给 元素仅应用于元素的内容框。如果元素 具有任何边框或填充，然后将其添加到宽度和高度中 以达到屏幕上呈现的框的大小。这 意味着当您设置宽度和高度时，您必须调整值 您给予以允许可能添加的任何边框或填充。
来源： https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
有一个名为 box-sizing 的 CSS 属性，它允许您调整此属性。将box-sizing: border-box添加到.div-with-border应该可以为您解决此问题！
看看上面的链接。他们有一个活生生的例子来证明box-sizing.
这是使用弹性框的一种解决方案
body,
html {
height: 100%;
width: 100%;
}
body,
html,
html * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100%;
width: 100%;
background-color: #ffb0a3;
display: flex;
justify-content: center;
align-items: center;
}
.div-with-border {
width: 90%;
height: 90%;
border: 10px;
border-color: #ffffff;
border-style: solid;
text-align:center;
font-size:7vw;
font-family:Open Sans;
font-weight:bold;
color:#d46a58;
}
此外，请始终执行以下操作：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
在<head>标记中。