身体高度比屏幕高度大100%

Question

我已将

html body

 标签高度设置为 

100%

 但在 Firefox 中显示的像素比屏幕多一些，因此会出现导航滚动条。除了指定任意 

height :98%

 之外，我该如何调整？我已将 

padding

 和 

margin

 设置为零。

我只使用 CSS 的 bootstrap，如果这很重要的话。

Answer 1

检查

body

 内的元素。其中之一可能有边距，甚至内容超出了 

body

 元素的范围。只需尝试在 Firefox 的 dev.tools 中一一删除所有内部元素，然后注意删除哪个元素可以解决问题。

Answer 2

为了跟进上面的答案，我注意到填充可以引起相同的效果，但只能在检查元素时注意到。

<button class="sbtn">
    <span class="text">
        my btn
    </span>
</button>

.sbtn {
    height: 5vh;
    background-color: red;
}

.text {
    padding: 10vh;
    color: white;
}

Answer 3

尝试将其添加到您的主 CSS 文件中。

/* CSS */

* {
   box-sizing: border-box;
  }
 

border-box 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充。如果将元素的宽度设置为 100 像素，则这 100 像素将包括您添加的任何边框或填充，并且内容框将缩小以吸收额外的宽度。这通常使得调整元素大小变得更加容易。

CSS 框大小调整