Calculate DIV width and height

<body style="width:100%;height:100%;margin:0;padding:0;">
<div id="004" style="float:left;position:absolute;width:100%;height:100px;background:green;bottom:0px;margin:0;padding:0;">aaa
<div id="001" style="float:left;position:absolute;width:100%;height:100%;bottom:100px;margin:0;padding:0;">
<div id="002" style="float:left;width:200px;background-color:blue;height:100%;margin:0;padding:0;">bbb</div>
<div id="003" style="background-color:red;height:100%;margin-left:200px;margin:0;padding:0;">ccc</div>

DIV001 AND DIV004 are parent div, DIV002 AND DIV003 are child div of DIV001.
I want body: height 100%,width 100%;
DIV004 fix on the bottom, height 200px,width 100%;
DIV001 width 100%, heght 100%-200px,
DIV002 width 200px,height 100% of DIV001,
DIV003 width 100%-200px of DIV001,height 100% of DIV001.

how to calculate the div width and height? Thanks.

To change the background colors and still retain the full height appearance that must me done on the #wrap div for bot columns.

Currently the left column gets it’s color from this image

which is set as repeat-y on the wrap div.

#wrap {
    min-height:100&#37;; /*height is determined from parent's height (html & body)*/
    margin:-100px auto 0;/*pull footer back into viewport with negative top margin*/      
    background:[B]#FFF[/B] url(images/[B]faux.jpg[/B]) repeat-y 0 0;

The main (right column) gets it’s color from the #FFF shown above.

You will need to make a new image to change the color of the left column.

To get rid of the dotted red border just remove it from Content, I had made a note in the CSS that it was just to show that floats are being contained. :wink:

That is what I meant by “full height appearance” in my first post.

Don’t use JS, use Rayzurs suggestion :slight_smile:

<div id="foo"></div>
alert('height: ' + document.getElementById('foo').style.height);
alert('width: ' + document.getElementById('foo').style.width);

I don’t think you can do it with CSS, you need javascript.

Thanks Rayzur, now I can run this css style wonderful.
That’s a great code written by you.

Don’t mess with that, it’s an Opera bug fix.
It has no visual effects on the page.

If I do not need #header, how to change the code? Thanks.
Just cut the header out of the CSS/HTML if you don’t need it. However it has a 100px top border on it to reclaim the negative top margin (for footer height) on the wrapping div.

The first element in the wrapping div gets a top border equal to the footer height to soak up the negative top margin.

This should be what you are after -

I used 100px top paddings on the top of each column to replace the soak up border.

You could do some positioning trickery like you had started with but it would not produce a user friendly layout. You would have to use overflow:auto to allow access to the content at smaller viewport heights which could leave you with scrollbars everywhere.

I would suggest using CSS to give a full height appearance. You could do a fluid width min-height:100% layout. We call it a Sticky Footer around here most of the time. It could also be done with a fixed position footer but that can complicate things too.

Something like this may work for you -

That will give you a full height appearance and when content reaches the footer it will push the footer on down. Most importantly you can access all content with one scrollbar when needed.

how to calculate body:before margin-top:-32767px?
If I do not need #header, how to change the code? Thanks.

Thanks Rayzur, You made it special for me, you are too warmly.
I still have a small question: how to make the Content border-bottom:1px dashed red near the #footer? Or if I need insert a background color for Content like #left(the color full of the Content)

I’m not good at js, can you write more detailed? thanks.

Hi coopersita, how to write a js code like this?
Hello Rayzur, thanks for your code, but I also want to know the js method for study.