将边框置于 100% 高度和宽度 div - 右边框和底边框外

Question

我正在使用 Firefox 并想创建一个 div 高度和宽度为 100% 以及 10px 的白色边框。边框的右侧和底部似乎在 div 和 body.

之外

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;
}

感谢您的帮助。

Answer 1

By default in the CSS box model, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen. This means that when you set width and height, you have to adjust the value you give to allow for any border or padding that may be added.

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

有一个名为 box-sizing 的 CSS 属性，它允许您调整此属性。将 box-sizing: border-box 添加到 .div-with-border 应该可以解决这个问题！

看看上面的link。他们有一个演示 box-sizing.

的实例

Answer 2

这是使用 flexbox 的一种解决方案

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> 标签中。

将边框置于 100% 高度和宽度 div - 右边框和底边框外

Place border in a 100% height and width div - right and bottom border outside

html

css

layout

border