我有一个在容器 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/
我错过了什么?