Question

我正在创建一个网站，但我希望该网站有一个全屏div（像这样：http://peet.io）但是我不知道我的代码有什么问题，我已经尝试了几次谷歌搜索，但仍然没有帮助。

.introduction {
    height: 100%;
    width: 100%;
    background: url('../images/header.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: absolute;
}

这是我的introduction css代码。然而，它只显示我的test div而不是我的introduction div，这是我最需要的，没有显示，＆＃39;测试＆＃39; div正在隐藏它。

如果有人知道如何解决这个问题，请说：）

Answer 1

这是因为设置height: 100%只是意味着“延伸到元素内容的高度”。由于它是一个空的<div>元素，因此100％的高度只计算为0px。

您可以做的是，当涉及到必须相对于视口大小计算的维度（请参阅browser compatibility and support）时，使用vw或vh个单位：

.introduction {
    height:100vh;
    width: 100%;
    background: url('../images/header.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

http://jsfiddle.net/teddyrised/6p3dk2yo/3/

更好的是，您还可以使用max-height或min-height来控制通过@media条件语句在较小的移动视口中元素的大小。< / p>

Answer 2

您的introduction div有一个height: 100%;，但它是100％无效。

如果您在div中添加了一些内容，例如 JS Fiddle ，那么您将能够看到背景图片。

如果您不想要div中的任何内容，则应将高度更改为固定像素数量，例如height: 500px;。

Answer 3

您的div在技术上没有内容，因此它实际上是0px（内容大小）的100％。如果你想坚持百分比并保持事物的响应性，为什么不在div包含中抛出实际图像？看看这个Jfiddle。 - ＆GT; http://jsfiddle.net/6p3dk2yo/

<body>
    <section class="introduction"></section>
    <section class="test"><img src='../images/header.jpg' alt='header' /></section>
    <script src="javascript/smoothscroll.js"></script>
</body>

如何在登录页面上创建全屏div

3 个答案: