Question

在加载时我想用bg图像加载 topsection div并让它占用整个屏幕，但是我在其下方有可以向下滚动的内容。 div应该仅在加载时将其自身调整为窗口屏幕，而不是像滚动时那样保持不变。我不能给div一个位置：绝对;无论是。

我正在敲打这个。我尝试过很多不同的事情

这是我的HTML：

 <div id="topsection" class="row bgimage ">

<div id="logomain" class="mainlogo ">
    <div class=" floorplanbuttoncontainer helvetical">
     <ul>
        <li><a href="javascript:;" class="floorplanbutton my_popup_open">Residence A - Duplex</a></li>
         <li>
         <a href="javascript:;" class="floorplanbutton my_popup3_open">Residence D - Simplex</a></li>

        </ul>       
     </div><!-- end floorplanbuttoncontainer -->

     </div><!-- end logomain -->

这是我的css背景图片：

  .bgimage {
     background: url(images/image.jpg) no-repeat center center fixed; 
     background-size: cover;


  .mainlogo {
     margin:0 auto;text-align:center;width:100%;height:488px; /*I think this height is messing things up */
      background-image:url(images/picture.png);background-repeat:no-repeat;
    background-position: center; 
      }

Answer 1

现代浏览器：一种简单的方法是使用vh个单位来获取视口高度

简化：jsBin demo

<div id="home" class="container full">
    <h1>HOME</h1>
</div>
<div id="about" class="container">
    <h1>About us</h1>
    <p>Content</p>
</div>

CSS：

.container { min-height:400px; }
.full { height:100vh; }

Crossbrowser：使用%代替vh，只需添加html, body{height:100%;} jsBin demo

Answer 2

要设置div占据整个屏幕，您需要将body和html元素的高度设置为100%。您还必须从中删除padding和margin。然后，您创建一个包装类来包含您的内容并为其分配background-image。然后你要做的就是在全屏图像下方创建内容以滚动进入！

Fiddle

修改

如果您运行下面的代码段并点击整页，则可以看到它的工作原理。

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.wrapper {
    min-height: 100%;
    background: red;
}
.full {
    width: 100%;
}
.footerThing {
    width: 100%;
    height: 200px;
    background: blue;
}

<div class="wrapper">
    <div class="full">
        asd
    </div>
</div>
<div class="footerThing">
    
</div>

将div拉伸到屏幕大小的底部，但允许向下滚动

2 个答案:

修改