使<div>占据所有可见的高度屏幕，其下方的内容为</div>

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 />

DEMO

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