Impossible Layout? 3 ROW layout with fixed Header & Footer height and full height middle section.

Question

webstuff1

Impossible Layout? 3 ROW layout with fixed Header & Footer height and full height middle section.

See diagram linked below:

http://i4.photobucket.com/albums/y104...

- The HTML body tag has a background image which needs to be visible through a transparent header/footer.
- Header must be 100px high and fixed to the top of the browser window, contains graphic.
- Footer must be 100px high and fixed to the bottom of the window, contains graphic
(Unless there is enough content to fill the content section in which case it would push the footer down, full screen scrolls)

This looks simple, similar to faux columns: 3 divs in a wrapper div set to 100% height along with body/html 100% height, and a y-repeat image on the wrapper background to give the effect of the middle stratching to fill the space between header and footer divs.

But putting the y-repeat image on the wrapper div covers the whole verticle area, and I need a transparent header and footer to show the page background image which is on the HTML body element.

Using standards based CSS is there is no way to set the middle div height="100%". That works or is valid.
Using old school tables you have to force quirks-mode with the old doctype for IE to get 100% height table, and I'm worried quirks-smode could bring more layout problems. Can't use %height as I have fixed graphics in header and footer.

And I can't change the design unfortunatly. Anyone able to help?

Status: Open Jul 19, 2007 - 08:23 AM

web development, css, html, Web Design, JavaScript

Comments (0) | New Comment

Do you have the same question? Follow this Question

Answer this question Report it

8answers

Answers

jon

Aug 11, 2008 - 06:25 AM

Been looking at this, and I may have got somthing... ___________________________________________________ body {margin:0;padding:0;height:100%;min-height:100%; text-align:center;} html {height:100%;min-height:100%; } #container { width:600px; background-color:#999999; min-height:100%; margin: 0 auto; text-align:left; position:relative; padding-bottom:50px; } * html #container { height: 100%; } #content {padding:10px;} #footer { height:50px; background-color:#CCCCCC; width:600px; position:absolute; bottom:0px; }

header + menu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

sdfsdfsdf

sdfsdfsdfLorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

sdfsdfsdf

sdfsdfsdfLorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

footer

______________________________________________________________ it seems to work on IE6 and firefox, although i'm not sure what else! Jon Shutt www.northernlightsdesign.co.uk

0

Report it

Comments (0) | New Comment

jon

Aug 11, 2008 - 06:46 AM

Just noticed one issue to do with the page being too long in firefox.

change the 'padding-bottom' to 'margin-bottom' in the #container style, and then adding the 'padding-bottom' into the #content style seemed to fix it though

0

Report it

Comments (0) | New Comment

admin

Mar 24, 2009 - 06:46 AM

The question looks to be abandoned by the user who asked it. If no action is taken within 2 days, a Quomon Moderator will consider closing the question and distributing the points.

The Quomon Team

0

Report it

Comments (0) | New Comment

DonaldKerr

Jan 07, 2010 - 02:02 PM

I am desperatley seeking an answer to this problem too. If anyone can help then it would be greatly appreciated. In the example above, if you change #content to include "background-color: yellow;" then you will see that the content does not actually stretch to the full available space above the footer. I also took out: * html #container { height: 100%; } as it didn't seem to do anything. Here's the adjusted code which made it a bit clearer for me: body { margin: 0; padding: 0; height: 100%; min-height: 100%; text-align: center; } html { height: 100%; min-height: 100%; } #container { width: 600px; background-color: #999999; min-height: 100%; margin: 0 auto; text-align: left; position: relative; margin-bottom: 50px; } #header { height: 100px; background-color: #CCCCCC; } #content { background-color: yellow; padding: 10px; height: 100%; } #footer { height: 50px; background-color: #CCCCCC; width: 600px; position: absolute; bottom: 0px; }

header + menu

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

sdfsdfsdf

sdfsdfsdfLorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

sdfsdfsdf

sdfsdfsdfLorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus tempor, augue at venenatis varius, arcu ligulac sodales folor urna, interdum sit amet, consectetuer sed, accumsan eget, nisl. Proin adipiscing lorem. Nullam vehicula faucibus tellus. Morbi purus. Morbi porta dolor nec ligula.

footer

0

Report it

Comments (0) | New Comment

DonaldKerr

Jan 07, 2010 - 02:03 PM

The above also includes jon's change to padding and margin (worked for me)

0

Report it

Comments (0) | New Comment

DonaldKerr

Jan 07, 2010 - 02:05 PM

Also, I added "height: 100%;" to #content which makes no difference.

0

Report it

Comments (0) | New Comment

gurusridhar

Jul 05, 2010 - 07:44 AM

This solution will work fine at all the browser

vert. space test
 html, body { height: 100%; margin:0; } #section_top { height: 100px; background-color: green; } #section_middle { /* height: auto% - see javascript */ /*border-bottom:1px solid #FFCC00;border-top:1px solid #FF3300;*/ background:url(../images/ad_home_page_big.jpg) no-repeat bottom center; } #section_bottom { height: 50px; background-color: red; }

window.onload = function() { var section_middle = document.getElementById("section_middle"); section_middle.style.height = 100 - (100 * 150 / document.body.clientHeight) + "%"; // or: // section_middle.style.height = (document.body.clientHeight - 150) + "px"; } window.onresize = function() { var section_middle = document.getElementById("section_middle"); section_middle.style.height = 100 - (100 * 150 / document.body.clientHeight) + "%"; // or: // section_middle.style.height = (document.body.clientHeight - 150) + "px"; } 

by
guru.sridhar

0

Report it

Comments (0) | New Comment

webstuff1

Jul 05, 2010 - 07:51 AM

Wow I'd given up on this (talked the client round to a different layout in the end), but thanks guys, I like the final result.

0

Report it

Comments (0) | New Comment

Answer this question

Share Your Own Experience & Expertise

We look to ensure that every question is answered by the best people with relevant expertise and experience, the best answers include multiple perspectives. Do you have relevant expertise or experience to contribute your answer to any of these commonly asked questions?

Impossible Layout? 3 ROW layout with fixed Header & Footer height and full height middle section.

8answers

Answers

Share Your Own Experience & Expertise

About Quomon

Browse by Topic

Recently Active Members

Tools