如何在html中精确地布局div

Question

我试图在页面中精确布局元素。我希望有人可以帮助我。

请查看http://jsfiddle.net/malaikuangren/5ssqP/2/show/。

感谢。

我的疑惑问题清单：

• 我不知道为什么dev-footer上面有空格，虽然我已经精确计算了元素的高度（你可以看到我在文档就绪事件中做了什么）
• 此问题也与页面右侧的表格内容
有关
• 请尝试复制更多行以查看会发生什么

感谢。

Answer 1

不使用Javascript来调整这些元素的大小。喜欢直接使用CSS。这将允许您编写更清晰的代码，更易于编辑和执行。在特定情况下，您无需使用Javascript手动计算高度。相反，利用CSS定位来达到理想的效果。

具体来说，设置主内容div以占据所有页面的高度，不包括页脚和标题，如下所示：

#content {
    position: fixed;
    bottom: 40px;
    top: 100px;
}

然后调整该div的内容以占用您想要的空间。例如，您希望侧边栏持有者占据#content div的整个高度。因此，以下CSS代码就足够了：

#sidebar-holder {
    position: absolute;
    top: 0;
    bottom: 0;
}

同样，您的“splitter”div可以使用CSS定位定位，但最好使用CSS边框实现：

#sidebar-holder {
    border-right: 5px solid black;
}

要避免广泛且难以管理的绝对定位，请在父元素中使用指令position: relative，在子元素中使用position:absolute。此技术允许您将子元素放在由其最近的相对父级定义的框内的绝对坐标中。因此，坐标（0,0）对应于父框的左上角。

我在您的代码中重现了您只想使用CSS的完整行为，它可以直接修复您的问题，而不会产生混乱的像素值计算。此外，用CSS替换Javascript使其在调整页面大小时表现正常，并且不需要在调整大小事件时重新运行jQuery代码。

Answer 2

您没有足够的内容来填补footer和content之间的空白。如果您在没有最大化屏幕的情况下查看页面，则没有差距。有很多方法可以解决它。我会增加页脚的height或增加内容的min-height。真的，这取决于你。