Question

美好的一天！我将发布的以下布局几乎可行。几乎。页面的一部分正在动态加载。如果它加载很少的元素（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>

Answer 1

一个工作示例是in this jsfiddle。基本上我添加了以下CSS：

#main1 { height: auto; }

我还在插槽类附近添加了一个边框，以便您可以看到正在发生的事情。 height: auto is described here

页面的动态部分打破了布局

1 个答案: