CODEWITHSUNDEEP
htmlcss
TheDelChop
TheDelChop

Reputation: 7998

HTML/CSS layout 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?

Upvotes: 0

Views: 134

Answers (2)

BalusC
BalusC

Reputation: 1108567

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.

Upvotes: 0

szupie
szupie

Reputation: 856

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.

Upvotes: 2

Related Questions