CSS布局- div覆盖屏幕大小

Question

我是一个新手在CSS/HTML和需要帮助的某个问题。我试图使我的开幕div (w/背景图像)覆盖整个屏幕(我已经成功地做到了)。问题是，无论我尝试什么，我都无法让下一个div在初始div之后开始。我包括我的HTML和CSS。问题是我不能使#map-contain在#open之后开始。本以为这只是一个"定位"问题，但我无法解决这个问题。请帮助。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%以防止元素重叠。

更新示例

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

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

例子