重叠父div的HTML/CSS div

因此，我已经构建了多个站点，可以随时解决这个问题。但是这次我陷入了困境。重叠父div的HTML/CSS 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; 
}

我在短的问题： http://i.stack.imgur.com/bBW8g.jpg

我已尽可能多的我的代码尽可能地，我希望你们中的一个能够指出我犯的错误。我通常不是有人在网上寻求帮助，但这个问题一直困扰着我足够长的时间。

由于提前， EvilTuinhekjeNL

来源

2011-11-01 Rob

它只停留在我的浏览器中（Chrome Canary）的内容 - > http://jsfiddle.net/RCFdz/ – PeeHaa

通过定义为包装的100％的高度，你仅仅局限于浏览器窗口的高度。由于其设定的高度，非常长的div会扩大这个限制。

若要解决此问题，请从包装器和任何其他容器中删除高度100％，如果您想限制内容大小为可查看文档的大小，则可以将div设置为absolute：absolute，然后设置top ，左，右和底部到屏幕的末端。

来源

2011-11-02 03:09:05 digibit

非常感谢！这对我非常有帮助！有时逻辑对HTML/CSS不起作用，哈哈！ – Rob

我曾经有完全相同的问题。直到有一天我受到严重的厌烦，决定去寻找背后的原因，而不仅仅是一个创可贴。我发现了一个很好的教程，用于定义“分隔列表”博客上元素的位置和高度。 <不认可我发现一篇文章相当有用> – digibit

重叠父div的HTML/CSS div

回答

相关问题