如何在html中精确地布局div [英] How to Precisely layout div in html

问题描述

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

I am stuck trying to precisely layout an element in my page. I hope someone can help me out.

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

谢谢。

我的疑惑问题清单：

• 我不知道为什么 dev-footer 上面有空格虽然我已精确计算了元素的高度（你可以看到我在文档就绪事件中做了什么）


• 这个问题也与页面右边的表格内容有关。


• 请尝试复制更多行以查看会发生什么

• I don't know why there is a space above the dev-footer although I have precisely calculated the height of elements (you can see what I have done in the document ready event)
• This problem is also with the table contents of the right of page
• Please try to duplicate more rows to see what happens

谢谢。

推荐答案

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

Do not use Javascript to resize these elements. Prefer to use CSS directly. This will allow you to write cleaner code which is easier to edit and performs better. In the particular case, you don't need to manually calculate the height using Javascript. Instead, utilize CSS positioning to achieve your desired results.

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

Specifically, set your main content div to take up all the page in height, excluding the footer and header as follows:

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

然后调整该div的内容以占用尽可能多的空间d喜欢他们在飞行中。例如，您希望侧边栏持有者占据#content div的整个高度。因此，以下CSS代码就足够了：

Then adjust the contents of that div to take up as much space as you'd like them to on-the-fly. For example, you want your sidebar-holder to take up the whole height of the #content div. Therefore, the following CSS code suffices:

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

同样，你的splitterdiv可以使用CSS定位定位，但它是使用CSS边框更好地实现：

Similarly, your "splitter" div can be positioned using CSS positioning, but it's better implemented using a CSS border:

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

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

To avoid extensive and unmanageable absolute positioning, use the directive position: relative in your parent elements and position:absolute within your child elements. This technique allows you to position child elements in absolute coordinates within a box defined by their closest relative parent. Therefore, the coordinates (0, 0) correspond to the top-left corner of the parent box.

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

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.

这篇关于如何在html中精确地布局div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！