HTML/CSS div 与父 div 重叠
因此，我建立了多个站点，并且总能以某种方式解决这个问题。但这一次我被困住了。
我有一个包装 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;
}
简而言之，我的问题： https://i.sstatic.net/bBW8g.jpg
我已经发布尽可能多的代码，我希望你们中的一个人能够指出我所犯的错误。我通常不会在网上寻求帮助，但这个问题已经困扰我很长时间了。
提前致谢， 邪恶TuinhekjeNL
So, I've built multiple sites and could always fix this problem, one way or another. But this time I got stuck.
I have a wrapper div, within this div I have two div's. When the inner div exceeds the length of the wrapper div, it just overlaps it. My goal is that the wrapper div gets the same height, as the inner div.
Here is the code I use:
<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>
And the corresponding 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;
}
My problem in short:
https://i.sstatic.net/bBW8g.jpg
I've posted as much of my code as possible, I hope one of you can point me the error I've been making. I'm usually not someone asking online for help, but this problem has been bugging me long enough.
Thanks in advance,
EvilTuinhekjeNL
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
通过为包装器定义 100% 的高度，您可以将其限制为浏览器窗口的高度。由于其设置的高度，非常长的 div 将扩展此限制。
要解决此问题，请从包装器和任何其他容器中删除 100% 的高度，如果您想将内容限制为可查看文档的大小，您可以将 div 设置为position:absolute，然后设置顶部、左侧、右侧并从底部到屏幕的末端。
By defining a height of 100% for the wrapper, you are limiting it to the height of the browser window. The very long div will extend this limitation because of its set height.
To fix this remove the height 100% from the wrapper and any other containers, If you want to limit limit the content to the size of the viewable document, you could set your divs to position: absolute and then set the top, left, right and bottom to the extremities of the screen.