美好的一天!我将发布的以下布局几乎可以工作。几乎。正在动态加载页面的一部分。如果它加载的元素很少 (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>
最佳答案
一个工作示例是 in this jsfiddle .基本上我添加了以下 CSS:
#main1 { height: auto; }
我还在插槽类周围添加了一个边框，这样您就可以看到发生了什么。 高度:自动 is described here
关于html - 页面的动态部分破坏了布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17587483/