Question

我是CSS / HTML的新手，在某个问题上需要帮助。我想让我的开场div（带背景图片）覆盖整个屏幕（我已成功完成）。问题是，无论我尝试什么，我都无法在初始div之后启动下一个div。我包括我的HTML和CSS。问题是我不能在#opening之后启动#map-contains。认为它只是“定位”问题，但我无法解决这个问题。请帮忙。 http://jsfiddle.net/nELQF/ - （需要黑色div从红色底部开始）

HTML

<div id="opening">
</div>
<div id="map-section">
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

#opening {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 1px solid orange;
    background-image: url('DSC_0577.JPG');
    background-position: center;
    background-size: cover;
}

#map-section {
width: 100%;
height: 800px;
background-color: black;
}

Answer 1

鉴于top元素是绝对定位的，你可以对第二个元素做同样的事情并设置top:100%以防止元素重叠。

Updated Example

#map-section {
    width: 100%;
    position: absolute;
    height: 800px;
    top: 100%;
    background-color: black;
}

作为替代方案，允许您避免必须绝对定位两个元素的可以说是更好的方法是在100% / html元素上设置body的高度。 / p>

Example Here

CSS布局 - div覆盖屏幕大小

1 个答案: