制作< DIV>占据所有VISIBLE高度屏幕，内容下面 [英] Make a <DIV> occupy all VISIBLE height screen, with content below it

问题描述

我的客户希望在她的网站的首页上显示大图片，但她希望在网页加载时，只有图片可见。页面的其余部分应该在此图片下方，并且只有在滚动页面时才可以查看。

My client wants a big image showing on the homepage of her site, BUT she wants that ONLY the image be visible when the page loads. All the rest of the page should be below this image and viewable only if the page is scrolled. When the page first loads, the visitor should only see the big image, no matter what monitor size or resolution he/she uses.

这样的东西：

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

是否可能？
如果这些信息很重要，这是一个Wordpress网站。

Is it even possible? It's a Wordpress site, if this information matters.

非常感谢。

推荐答案

您可以使用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 < a>

DEMO

您可以在div上设置背景图片，并使用各种 background-size 属性，使其看起来不错。

You can set a background image on the div and play with the various background-size properties to make it look however you want.

这篇关于制作&lt; DIV&gt;占据所有VISIBLE高度屏幕，内容下面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！