HTML/CSS layout question

Question

I just need a little help with some CSS layout if you don't mind.

I've got three things I'm trying to play around with and I need some help making this work the way I was hoping.

I've got the <body> element of a page, which I'd like to be 100% of the browser window, obviously.

Then I've got two <div> elements which I'd like to stack on top of each other, but the trick is this, I'd like the bottom <div>, (a menu which should really be a fixed height) to determine the height of the top <div>.

Is there a way to lay this out in CSS?

Can you give more information on why you want that? There might be a better approach but we can't help with out a better understanding of the intention. Code is also usually a good idea. — vfilby
– vfilby, Commented May 1, 2010 at 4:15
There are more factors to take into account. Are you basically saying that the bottom <div> should be sticking to the bottom of the page regardless of the total height (so that it still stays there when the top <div> is higher than the viewport and thus should get the scrollbar alone)? Or do 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? That makes quite a difference in the answers. — BalusC
– BalusC, Commented May 1, 2010 at 4:15
I agree, what is the intent? Are you trying to get rid of the scrollbars? I think focusing on only having the bottom bar be a specific height is sufficient, and leave the rest of the page alone. — jcolebrand
– jcolebrand, Commented May 1, 2010 at 4:38

szupie · Accepted Answer · 2010-05-01 04:30:51Z

2

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.

answered May 1, 2010 at 4:30

szupie

85610 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

BalusC · Accepted Answer · 2010-05-01 04:45:12Z

0

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.

answered May 1, 2010 at 4:45

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

1 Comment

szupie Over a year ago

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.

Collectives™ on Stack Overflow

HTML/CSS layout question

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related