页面底部奇怪的灰色区域答案

【问题标题】：Werid gray area in the buttom of the page页面底部奇怪的灰色区域
【发布时间】：2020-09-30 23:07:54
【问题描述】：

此页面仅包含页眉，根本没有页脚https://test.com/

我想要做的是在移动设备和笔记本电脑上不滚动页面的情况下以全尺寸制作页面。我试图将高点设置为 100% 但它不起作用。我猜这个 CSS 的全部问题

.custom-header-media {
    min-height: 200px;
}

我尝试将其设置为

height: 100%;
height: auto;

还是不行。

我还尝试将图片设置为：

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

还是不行，我把页面设置为

body, html {
  height: 100%;
}

谁能告诉我我做错了什么？

【问题讨论】：

【解决方案1】：

试试这个 CSS 的全角图片

.custom-header-media .wp-custom-header img, .custom-header-media video {
    height: 100vh;
}
.site-inner {
    overflow-x: unset;
}

【讨论】：

【解决方案2】：

只需设置：height: 100vh 将修复它。因为 vh = 视口高度。

你得到的灰色并不奇怪，这只是直到页面底部的正文颜色。

但您可能会遇到其他问题或响应能力，您应该根据屏幕宽度进行检查。

.custom-header-media {
    min-height: 100vh;
}

享受吧。

【讨论】：