0

Good day! The following layout which I will post almost works. Almost. A part of the page is being dynamically loaded. If it loads few elements (0/1/2/3) It is alright. If it is more, the footer of the page isn't pushed back. (which basically is the error). I am posting the entire source code. It is configured to work nicely. To see the error itself simply change the value of the CHANGEME variable to something larger than 3.

The source:

<!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>
4

1 回答 1

0

这个 jsfiddle 中有一个工作示例。基本上我添加了以下CSS：

#main1 { height: auto; }

我还在 slot 类周围添加了一个边框，这样你就可以看到发生了什么。 height: auto 描述here

于 2013-07-11T07:38:05.217 回答