Html 使用多个最小高度100%div时，防止单个页面上的div重叠_Html_Css

Html 使用多个最小高度100%div时，防止单个页面上的div重叠

html css

Html 使用多个最小高度100%div时，防止单个页面上的div重叠,html,css,Html,Css,我有一个单页网站，在一个容器div中使用多个div。每个div的高度都设置为最小高度100%。直到其中一个div内的内容大于浏览器分辨率（内容与边框div重叠）时，此操作才起作用。我尝试将position:relative添加到容器中，position:absolute添加到子对象中，但这会导致除了底部div之外的所有内容都消失我将以下内容放在一起，以演示我所说的内容： HTML 这就是它的作用：如果删除相对/绝对定位，则大小很好，但内容重叠：我遗漏了什么？发现了问题（似乎在我提问时总是发

我有一个单页网站，在一个容器div中使用多个div。每个div的高度都设置为最小高度100%。直到其中一个div内的内容大于浏览器分辨率（内容与边框div重叠）时，此操作才起作用。我尝试将position:relative添加到容器中，position:absolute添加到子对象中，但这会导致除了底部div之外的所有内容都消失

我将以下内容放在一起，以演示我所说的内容：

HTML

这就是它的作用：

如果删除相对/绝对定位，则大小很好，但内容重叠：

我遗漏了什么？

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

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

发件人：

致：

我强迫内容占据浏览器高度的100%。这阻止了div自动扩展。

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

<!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>

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

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

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