Stretch a middle section to full length

[spz1st]

I have a page with a header on the top and a sticky footer on the bottom. Both the header and footer have fixed height. Now I want the middle section to be always the height of the space between the header and footer, stretching or shrinking automatically with window resizing. Is there a css trick to do that without using javascript? Seems by default the height of the middle section is set to be the actual height of the content. For example, if I have a panel on left with a several menu items, the height of the panel is only set to height of what takes to contain the menu items. But I like the height of the panel to go from the header to the footer, so the background color will stretch to cover the entire height, not just the menu items.

Thanks.

[kwerty]

a demo code would be nice.

[spz1st]

Okay here is the sample code. I like the left panel stretched to the full length between the header and footer. This basic layout is quite common and I use it in many occasions. But the problem (I saw it in many web sites) is that either the the left panel does not go all the way to the footer (as shown in this example), or the footer is not at the bottom of the window (a non-sticky footer), or the height of the panel is set to be long enough to push the footer off the bottom of the window.

Also notice that I’ve put a red border around page-body which includes the panel and content divs, but you’ll see, the red box does not show up as expected. Why is so?

Thanks.

[NOD EDIT – Codedunp removed]

[shaneisme]

Unfortunately code dumps don’t really work out too great, a live demo is the best way to get help. Could you set up a live example on CodePen or something similar?

[spz1st]

Okay here is the url for the demo.

http://arvha.com/layout.html

[shaneisme]

Well you can use Flexbox:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or roll it old school:

https://css-tricks.com/fluid-width-equal-height-columns/

[Krish1980]

Is this what you’re looking for?

http://codepen.io/Krish1980/full/NPpbRj/

…… as far as I can see, it ticks all your requirements

[spz1st]

Thanks. That certainly looks good.

Based on tricks from other posts, I managed to get a nice basic layout which is relatively easy for people to adopt for their pages if they want the similar layout.

http://arvha.com/basic-layout.html

I just can’t help it to get back to the width/height and margin issues. Now you have worked out a layout nicely, right? But what happens when you begin to style the contents with margins, border and/or padding? More often than not the layout will be ruined! For example, adding a 1px border to the page-wrap div will cause the vertical scrollbar to appear (at least in my case, with both chrome and safari), even the box-sizing is set to border-box.

[Author]

Posts