0

我有一个在容器 div 中使用多个 div 的单页网站。每一个的高度都设置为 100% 的最小高度。这可以正常工作，直到其中一个 div 内的内容大于浏览器分辨率 - 内容与边框 div 重叠。我试图添加 position:relative 到容器， position:absolute 到孩子，但这会导致除了底部 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/

我错过了什么？

4

1 回答 1

1

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

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

从：

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

至：

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

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

于 2013-01-27T21:06:30.880 回答