динамическая часть страницы разрывает макет

Добрый день! Следующий макет, который я опубликую, почти работает. Почти. Часть страницы динамически загружается. Если он загружает несколько элементов (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

Нет проблем! :) –

динамическая часть страницы разрывает макет

ответ

Смежные вопросы