页面底部奇怪的灰色区域

Question

此页面只有页眉，根本没有页脚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%;
}

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

Answer 1

只需设置：height: 100vh 即可修复。作为 vh = 视口高度。

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

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

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

尽情享受吧。

Answer 2

为 full-width 图片尝试此 CSS

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

Werid gray area in the buttom of the page