Question

我有一个单页网站，在容器div中使用多个div。这些中的每一个的高度设置为100％的最小高度。这可以正常工作，直到其中一个div内的内容大于浏览器分辨率 - 内容重叠边框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/

我错过了什么？

Answer 1

发现问题（当我问一个问题时，似乎总会发生这种情况^^）。

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

自：

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

要：

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

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

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

1 个答案: