所以，我已经建立了多个站点，总能以某种方式解决这个问题。但是这次我卡住了。
我有一个包装 div，在这个 div 中我有两个 div。当内部 div 超过包装 div 的长度时，它只是重叠它。我的目标是包装 div 获得与内部 div 相同的高度。
这是我使用的代码:
<body>
<!-- Begin of site -->
<div id="wrapper">
<!-- Site Wrapper -->
<div id="site-wrapper">
<!-- Header -->
<div id="header"></div>
<!-- end Header -->
<!-- Column positioner -->
<div id="colpos">
<!-- Column Left -->
<div id="columnLeft">
<div id="mainWrap">
<div id="contentBar"></div>
<div id="main">
Content
<div id="longDiv">Very long</div>
</div>
</div>
</div>
<!-- Column Right -->
<div id="columnRight">
<div id="links">
<div id="navBar"></div>
Links
</div>
</div>
</div>
<!-- einde Column positioner -->
<div id="footer">Copyright</div>
</div>
<!-- end Site Wrapper -->
</div>
<!-- end site -->
</body>
以及对应的CSS:
/*==============================
SITE RESETS
===============================*/
html {
margin: 0px;
padding: 0px;
font-family: Calibri, arial;
}
body{
margin: 0px;
padding: 0px 0px 50px 0px;
border: 0px;
background: url('img/background.png');
}
a img { border:none; }
#longDiv{
height: 2000px;
color: white;
background-color: black;
}
/*==============================
SITE WRAPPER
===============================*/
#wrapper{
width: 1200px;
margin: 0px;
padding: 0px;
border: 0px;
}
#site-wrapper{
width: 970px;
margin: 0px 0px 30px;
padding: 0px;
border: 0px;
position: relative;
background-color: #ebebeb;
left: 115px;
top: 30px;
}
#header{
clear: both;
min-width: 970px;
width: 100%;
height: 190px;
margin: 0px;
padding: 0px;
border: 0px;
background: #fff url('img/header.png');
background-repeat: repeat-x;
position: relative;
top: 30px;
}
#colpos{
clear: both;
float: left;
height: 100%;
min-height: 100px;
width: 920px;
padding: 50px 20px 20px 20px;
margin: 0px;
border: 0px;
}
#columnLeft
{
float: left;
width: 620px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
#columnRight
{
float: right;
width: 265px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
/*==============================
Content
===============================*/
#mainWrap{
float: left;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#contentBar{
float: left;
min-width: 620px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/content.png');
background-repeat: no-repeat;
}
#main{
clear: both;
height: 100%;
min-height: inherit;
float: left;
margin: 5px 5px 5px 5px;
max-width: 620px;
height: inherit;
font-family: Calibri, arial;
}
#links{
float: left;
width: 100%;
min-height: 250px;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#navBar{
float: left;
min-width: 265px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/nav.png') right;
background-repeat: no-repeat;
}
#footer
{
clear: both;
margin: 10px 10px 10px 10px;
width: 50%;
position: relative;
top: 0.5em;
left: 25%;
font-family: Calibri, arial;
color: white;
text-align: center;
font-style: italic;
background-color: #689e9f;
}
我的问题简而言之: http://i.stack.imgur.com/bBW8g.jpg
我已经尽可能多地发布了我的代码，我希望你们中的一个能指出我一直在犯的错误。我通常不会在网上寻求帮助，但这个问题已经困扰我很久了。
提前致谢， 邪恶的TuinhekjeNL
最佳答案
通过为包装器定义 100% 的高度，您将它限制在浏览器窗口的高度。非常长的 div 将由于其设置的高度而扩展此限制。
要解决此问题，请从包装器和任何其他容器中移除 100% 的高度，如果您想将内容限制为可查看文档的大小，您可以将 div 设置为 position: absolute 然后设置顶部，左、右和底部到屏幕的末端。
关于css - 与父 div 重叠的 HTML/CSS div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7974251/