使用多个最小高度 100% div 时防止 div 在单个页面上重叠答案

【问题标题】：Prevent div overlap on single page when using multiple min-height 100% divs使用多个最小高度 100% div 时防止 div 在单个页面上重叠
【发布时间】：2013-01-28 05:06:30
【问题描述】：

我有一个在容器 div 中使用多个 div 的单页网站。这些中的每一个的高度都设置为 100% 的最小高度。这可以正常工作，直到其中一个 div 内的内容大于浏览器分辨率 - 内容与边框 div 重叠。我尝试添加 position:relative 到容器， position:absolute 到子项，但这会导致除底部 div 之外的所有 div 都消失。

我将以下内容放在一起来说明我在说什么：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
    <body>
        <div id="container">
            <!-- Content -->
            <div id="content">
                <h1>content</h1>
            </div>
            <!-- About -->
            <div id="about">
                <h1>about</h1>
            <!-- Contact -->
            <div id="contact">
            </div>
        </div>
    </body>
</html>

CSS

html, body{height:100%;min-height:100%;min-width:60.000em;font-size:30px;}
#container{
    width:100%;
    min-height:100%;
    margin:auto;
    padding:auto;
    height:100%;
    position:relative;
}
#content, #about, #contact {
    position: absolute;
}
#content{
    min-height: 100%;
    height:100%;
    background-color:red;
}
#about{
    min-height: 100%;
    background-color:blue;
}
#contact {
    min-height: 100%;
    background-color:yellow;
}

它正在运行：http://jsfiddle.net/s62nr/1/

如果我去掉相对/绝对定位，大小没问题，但内容重叠：http://jsfiddle.net/s62nr/2/

我错过了什么？

【问题讨论】：

对于那些对此投反对票的人 - 不加评论就投反对票是没有用的。我不介意投反对票，但请帮助我“吸取教训”，这样我就不会再这样做了。谢谢。

标签： html css

【解决方案1】：

发现了问题（当我提出问题时似乎总是会发生这种情况^^）。

问题在于我将子 div 高度设置为 100%。这需要删除：

发件人：

#content{
    min-height: 100%;
    height:100%;
    background-color:red;
}

收件人：

#content{
    min-height: 100%;
    background-color:red;
}

我强制内容占据浏览器高度的 100%。这会阻止 div 像应有的那样自动扩展。

【讨论】：