html - 做一个占据所有可见高度屏幕，其下方有内容

Question

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

像这样的东西：

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

甚至可能吗？这是一个 Wordpress 网站，如果这些信息很重要的话。

非常感谢！

Answer 1

你可以只用 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 />

演示

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