Question

我正在使用Firefox，并想创建一个高度和宽度为100％的div和一个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

在CSS框模型中，默认情况下，您分配给元素仅应用于元素的内容框。如果元素有任何边框或填充，然后将其添加到宽度和高度得出在屏幕上渲染的框的大小。这个表示在设置宽度和高度时，必须调整该值您会考虑允许添加任何边框或填充。

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

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

看看上面的链接。他们有一个生动的示例，演示了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中-右侧和底部边框位于外部

2 个答案: