3

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

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

谢谢。

我的困惑问题清单：

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

谢谢。

4

2 回答 2

4

不要使用Javascript 来调整这些元素的大小。更喜欢直接使用 CSS。这将允许您编写更易于编辑且性能更好的更简洁的代码。在特定情况下，您不需要使用 Javascript 手动计算高度。相反，利用 CSS 定位来实现您想要的结果。

具体来说，将您的主要内容 div 设置为占据所有页面的高度，不包括页脚和页眉，如下所示：

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

然后调整该 div 的内容以占用尽可能多的空间，就像您希望它们即时运行一样。例如，您希望侧边栏支架占据#content div 的整个高度。因此，以下 CSS 代码就足够了：

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

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

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

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

I've reproduced in your code the full behavior that you desire using CSS only and it fixes your problems directly, without messy pixel value calculations. In addition, replacing Javascript with CSS makes it behave correctly when resizing the page and does not require rerunning your jQuery code on resize events.

于 2012-12-20T14:56:41.140 回答
0

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

于 2012-12-20T14:54:31.043 回答