如何在首页创建一个全屏的div

Question

如何在首页创建一个全屏的div

3

我正在创建一个网站，但我希望该网站有一个全屏的 div（类似于这个网站：http://peet.io），但我不知道我的代码哪里出了问题。我已经尝试过多次搜索，但还是没有得到帮助。

这是我的代码：http://jsfiddle.net/6p3dk2yo/。请帮我看一下，谢谢！

.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;
}

这是我的介绍CSS代码：introduction。但它只显示我的test div，而不是我最需要的introduction div，后者未显示，因为“test” div使其隐藏。

如果有人知道如何解决这个问题，请告诉我 :)

- Unique

3个回答

0

你的 div 技术上没有内容，因此它实际上是 0 像素（内容大小）的 100%。如果你想保持百分比并保持响应式，为什么不在那个 div 容器中放一个真正的图像呢？看看这个 Jfiddle。-> 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>

- Volearix

0

你的 introduction div 设置了 height: 100%;，但它是基于空白内容的 100%。

如果你在 div 中添加一些内容，就像在这个JS Fiddle中一样，那么你就能看到背景图片。

如果你不想在 div 中添加任何内容，那么你应该将高度改为固定像素值，例如 height: 500px;。

- Dan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry · Accepted Answer

这是因为设置height: 100%仅意味着“将高度拉伸到元素内容的高度”。由于它是一个空的<div>元素，高度为100%简单地计算为0px。

不过，在涉及到尺寸的情况下，您可以使用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条件语句来控制在较小的移动视口中该元素的大小。