Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 125 Time: 11:12 - Jul 19, 2007

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/we...

- 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?

Categories:

web development Web Design
CSS JavaScript
HTML

Answer Discussion

Tutorials

admin

Date:: Aug 22, 2007

Time:: 13:25

webstuff1, did you get your question solved?

If you did then please close this question and distribute the points. If you found the solution on your own, we would be very happy if you could explain it here for the sake other users having the same problem.

If you didn't get a solution to your problem, please leave a comment here to let the experts know that you're still looking for an answer.

Thanks,
The Quomon Admin Team

jon

Date:: Aug 11, 2008

Time:: 09:25

Been looking at this, and I may have got somthing...

___________________________________________________

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>
<style type="text/css" media="screen">
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;
}
</style>
</head>

<body>
<div id="container">
<div style="height:100px; background-color:#CCCCCC; ">header + menu</div>
<div id="content">
<p>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.</p>
<p>sdfsdfsdf</p>
<p>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.</p>
<p>sdfsdfsdf</p>
<p>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.</p>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>

______________________________________________________________

it seems to work on IE6 and firefox, although i'm not sure what else!

Jon Shutt
www.northernlightsdesign.co.uk

jon

Date:: Aug 11, 2008

Time:: 09:46

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

admin

Date:: Mar 24, 2009

Time:: 09:46

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

DonaldKerr

Date:: Jan 07, 2010

Time:: 18:02

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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title></title>

<style type="text/css" media="screen">

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;
}

</style>

</head>

<body>

<div id="container">

<div id="header">header + menu</div>

<div id="content">

<p>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.</p>
<p>sdfsdfsdf</p>
<p>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.</p>
<p>sdfsdfsdf</p>
<p>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.</p>

</div>

<div id="footer">footer</div>
</div>

</body>
</html>

DonaldKerr

Date:: Jan 07, 2010

Time:: 18:03

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

DonaldKerr

Date:: Jan 07, 2010

Time:: 18:05

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

gurusridhar

Date:: Jul 05, 2010

Time:: 10:44

This solution will work fine at all the browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>vert. space test</title>
  <style type="text/css">
   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;
   }
  </style>
</head>

<body>
  <div id="section_top"> </div>
  <div id="section_middle"> </div>
  <div id="section_bottom"> </div>

  <script type="text/javascript">
   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";
   }
  </script>
</body>
</html>

by
guru.sridhar

webstuff1

Date:: Jul 05, 2010

Time:: 10:51

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.

Question Answered

This question has been closed, and points have been rewarded to the following experts:

jon:	25
DonaldKerr:	25
gurusridhar:	75

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Questions
Need Help with CSS Page Layout
Design page in HTML by using DIV tag with header and footer fixed size.

Ask a Question

Have a new question? Ask!

You have 100 characters to use

Top Experts

Rank	Expert	Points
1.	nidhi	10354
2.	oracleofDelphi	6493
3.	rcastagna	5596
4.	LAGM	4848
5.	PeterNZ	3487
6.	gonzalo	2840
7.	Mason	2770
8.	jgivoni	2303
9.	xarcus	1820
10.	Anpanman	917

Become an Expert


"Psst, Quomon is a great site. Pass it on." Tell a Friend \| Link To Us \| Save to Delicious \| Digg it

Language Options
English:	www.quomon.com
Español:	www.quomon.es


Sponsors Questions and Answers Software

Question

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

Similar Questions

Ask a Question

Have a new question? Ask!

Top Experts

Become an Expert