重疊父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

回答

相關問題