Question

我已将html body标记高度设置为100%，但在Firefox中显示的像素数比屏幕高出几个像素，因此会出现导航滚动条。除了指定任意height :98%之外，我该如何调整？我已将padding和margin设置为零。

我只使用bootstrap作为css，如果这有任何重要性。

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 box sizing

车身高度比屏幕高度大100％

3 个答案: