使<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属性进行播放,以使其看起来像您想要的那样.