使

占据整个屏幕的可见高度，其下方有内容

我的客户希望在她的网站主页上显示一个大图像，但她希望在页面加载时只有图像可见。页面的所有其余部分应位于该图像下方，并且仅在滚动页面时才可见。当页面首次加载时，访问者应该只能看到大图像，无论他/她使用什么显示器尺寸或分辨率。

像这样的东西：

Screen boundary ->----------------- |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
                  IMG               |
Screen boundary ->----------------- |
                  Content           |
                  Content           | <- scroll bar

有可能吗？ 如果此信息很重要的话，这是一个 WordPress 网站。

多谢！

您只需使用 CSS 即可做到这一点：

body, html {
  margin:0;
  height: 100%;
}
#foo {
  background-color:#ccc;
  height: 100%;
}

<div id="foo">hello. content goes here</div>
rest of my content<br />

DEMO

您可以在 div 上设置背景图像并使用各种background-size属性使其看起来像您想要的那样。