ansaurus

Question

Answer 1

+2 A:

I'm assuming you want the height of the first <div> to have a height of <body> minus second <div>.

If you're using percentages in your layouts, then you can make one have a height of 90% and the other 10%.

But if you're using pixel sizes, you'll need to use javascript. There's no way to determine height by subtraction in CSS 2. You can use offsetHeight to get the pixel height of an element and style.height to set the height of the other.

szupie 2010-05-01 04:30:51

Answer 2

A:

If you want the bottom <div> to be fixed to the bottom of the viewport all the time regardless of the height of the top <div>, then set its position to fixed. E.g.

#menu {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
}

Else if you want to expand the top <div> to the bottom of the page if its content is smaller than the total height of the viewport, i.e. the "sticky footer" technique, then have a look here or here.

BalusC 2010-05-01 04:45:12

That's a good solution, unless the top `<div>` gets too long, which would then be covered by the bottom `<div>`. But a bottom margin on the top div might fix that.

szupie 2010-05-01 04:58:23

ansaurus

tags:

views:

answers:

HTML/CSS layout question

related questions