html - CSS 布局 - 覆盖屏幕尺寸的 div

Question

我是 CSS/HTML 的新手，在某个问题上需要帮助。我试图让我的开头 div(带背景图像)覆盖整个屏幕(我已经成功完成)。问题是，无论我尝试什么，我都无法让下一个 div 在初始 div 之后启动。我包括我的 HTML 和 CSS。问题是我无法使#map-contain 在#opening 之后启动。以为这只是“定位”问题，但我无法解决这个问题。请帮忙。 http://jsfiddle.net/nELQF/ - (需要黑色 div 从红色 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:100%为了防止元素重叠。

Updated Example

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

作为替代方案，一种可以让您避免绝对定位两个元素的更好方法是简单地将高度设置为 100%。在 html 上/body元素。

Example Here