Question

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

Please review http://jsfiddle.net/malaikuangren/5ssqP/2/show/.

Thanks.

My Confused Question List:

• 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

Thanks.

Answer 1

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.

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;
}

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;
}

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;
}

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.

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.