頁面的動態部分打破布局

美好的一天！我將發佈的以下佈局幾乎可行。幾乎。頁面的一部分正在被動態加載。如果它加載很少的元素（0/1/2/3），那沒問題。如果更多，頁面的頁腳不會被推回。（這基本上是錯誤）。我發佈了整個源代碼。它被配置爲很好地工作。以查看錯誤本身只需將 CHANGEME變量的值更改爲大於3頁面的動態部分打破布局

源較大：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>LayoutTest</title> 
    <style> 
     body { 
      margin: 0; 
      padding: 0; 
     } 
     .webbody { 
      margin: 0 auto; 
      padding:0; 
      width:900px; 
      height:200px; 
      max-height:2000px; 
     } 
     .topHeader { 
      width:900px; 
      height:50px; 
      margin: 0 auto; 
      padding:0; 
      background:purple; 
     } 

     .dynamic { 
      width:650px; 
      height:400px; 
      float:left; 
     } 

     .sidebar { 
      margin-left:50px; 
      width:150px; 
      height:400px; 
      float:left; 
      background:red; 
     } 
     .footer1 { 
      float:left; 
      margin: 0 auto; 
      padding:0; 
      width:900px; 
      height:20px; 
      background:lime;  
     } 
    </style> 
</head> 
<body> 
    <div class="webbody"> 
     <div class="topHeader"></div> 
     <div id="main1" class="dynamic"></div> 
     <div class="sidebar"></div> 
     <div class="footer1"></div> 
    </div> 
</body> 
</html> 
<script> 
    //this function only loads the dynamic part of the page 
    function load() { 
     var main = document.getElementById("main1"); 
     var CHANGEME = 2; 

     for (var i = 0; i < CHANGEME; i++) { 
      var slot = document.createElement("div"); 
      slot.className = "slot"; 
      main.appendChild(slot); 
     } 
    } 
    load(); 
</script>

來源

2013-07-11 Bloodcount

工作示例是in this jsfiddle。基本上我已經添加了下面的CSS：

#main1 { height: auto; }

我還添加了周圍的槽類的邊界，所以你可以看到發生了什麼。 height: autois described here

來源

2013-07-11 07:38:05

謝謝，先生。這解決了這個問題，可能是我所有關於高度屬性的問題！（我會將此標記爲計時器到期時的答案） – Bloodcount

沒問題！ :) –

頁面的動態部分打破布局

回答

相關問題