为什么第一节 CSS 类需要 calc(100% - 70px) 而不是 calc(100% - 75px) 在 CSS 和 HTML 中没有滚动条？答案

【问题标题】：Why the firstsection CSS class needs calc(100% - 70px) instead of calc(100% - 75px) to not have a scrolldown bar in CSS and HTML?为什么第一节 CSS 类需要 calc(100% - 70px) 而不是 calc(100% - 75px) 在 CSS 和 HTML 中没有滚动条？
【发布时间】：2019-12-30 04:29:07
【问题描述】：

我目前正在学习 HTML 和 CSS。

我目前面临有关盒子模型的问题。

在下面的代码中，关于第一部分 CSS 类，我的窗口上没有滚动条的值为 calc(100% - 70px)。

但是，我不理解这个值，因为没有滚动条的最小值应该是 calc(100% - 75px)（顶部填充值）。

你能解释一下我的想法有什么问题吗？

提前谢谢你。

html {
  min-height: 100%;
  min-width: 100%;
}

body {
  height: calc(100vh - 16px);
  width: calc(100vw - 16px);
  margin: 8px;
}

.firstsection {
  height: calc(100% - 70px);
  padding-left: 120px;
  padding-top: 75px;
  background-color: #F5F5F5;
  border-bottom-style: ridge;
}

<html>
<body>
  <section class="firstsection">
  </section>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

您的元素正好溢出主体，底部边框为8px.3px，其余填充为5px (75px - 70px)。由于您的身体已经有8px 的边距底部，您不会触发带有溢出的8px 的滚动，因为它们将位于边距的顶部。

添加一些着色和透明度，以便更好地看到底部溢出的部分：

html {
  min-height: 100%;
  min-width: 100%;
  background:red;
}

body {
  height: calc(100vh - 16px);
  width: calc(100vw - 16px);
  margin: 8px;
  background:green;
  outline:1px solid yellow;
}

.firstsection {
  height: calc(100% - 70px);
  padding-left: 120px;
  padding-top: 75px;
  background-color: #F5F5F5;
  border-bottom-style: ridge;
  opacity:0.8;
}

<html>
<body>
  <section class="firstsection">
  </section>
</body>
</html>

如果您将溢出属性添加到正文，这将是微不足道的，因为您将触发正文上的滚动：

html {
  min-height: 100%;
  min-width: 100%;
  background:red;
  overflow:auto;
}

body {
  height: calc(100vh - 16px);
  width: calc(100vw - 16px);
  margin: 8px;
  background:green;
  outline:1px solid yellow;
  overflow:auto;
}

.firstsection {
  height: calc(100% - 70px);
  padding-left: 120px;
  padding-top: 75px;
  background-color: #F5F5F5;
  border-bottom-style: ridge;
  opacity:0.8;
}

<html>
<body>
  <section class="firstsection">
  </section>
</body>
</html>

为了避免身体滚动，你需要calc(100% - 75px - 3px)（所有的填充和边框）

html {
  min-height: 100%;
  min-width: 100%;
  background:red;
  overflow:auto;
}

body {
  height: calc(100vh - 16px);
  width: calc(100vw - 16px);
  margin: 8px;
  background:green;
  outline:1px solid yellow;
  overflow:auto;
}

.firstsection {
  height: calc(100% - 75px - 3px);
  padding-left: 120px;
  padding-top: 75px;
  background-color: #F5F5F5;
  border-bottom-style: ridge;
  opacity:0.8;
}

<html>
<body>
  <section class="firstsection">
  </section>
</body>
</html>

【讨论】：