asked on

Help making full screen layout with fixed footer and scrollable content.

guys I need some guidance on this. I need to work on this CSS layout that can make the page max out to the browser dimensions.

I have a header and footer with a fixed-width left column and a fluid right column in between.
I'd like for the middle columns to scroll while having the header and footer anchored to the top and bottom.
I'm having a hard time making all of it work, I'm 80% there.
Attached is the HTML as well as the external CSS file.
If you can fix it and tell me what you did, I would appreciate it. I'm at the end of my rope on this.
Styles.css.txt
Main.txt

Savag3

Hi,

I used the method described here to do this, and it worked nicely.

Greets,
Tjeerd

LZ1

Since your footer is outside of the other page content you can use this to position it at the bottom and stay there:
Not taking away from Savag3's idea, since it does work. However, it's based upon the idea that all elements are contained within 1 DIV. On your page though the footer is outside of all the other elements.

#footer
{
	clear: left;
	width: 100%;
	background:#003366;
	/*background: #387A9B;*/
	color: #FFF;
	text-align: center;
	padding: 4px 0;
	font-size:12px;
	position:fixed;
	bottom:0;
	height:4em;
}

Open in new window

rotovibe

ASKER

The real issue with this is maximizing the height of the inner content to fill the page, wether it be background color or the actual content.
Anchoring the footer is only a part of the problem. I want it to function like a frames layout in relation to maximizing the content height in relation to an anchored footer.
When I maxed the relative height of the content, the content was bleeding past the footer. I want it to be aware of where the footer is and scroll the rest of it's content relative to that.
Thanks for the input. I really am stuck!
Name your points price! LOL

Savag3

Rotovibe:

The url I gave you describes exactly what (I think) you want to achieve. It always keeps the footer at the bottom of the page, even if the content is very small.

The structure used is attached, but the best thing is to look at the demo here .

If you depend on the content stretching across the page at all times for a background color or border I'm not sure how to achieve that. Only thing I can think of is putting a fixed height, 1px width element into the content div.

Hth


<body>
   <div id="container">
      <div id="header">
      </div>
      <div id="content">
      </div>
      <div id="footer">
      </div>
   </div>
</body>
 
 
<!-- Relevant css -->
html, body {
  height:100%;
  margin:0;
  padding:0;
}
 
#container {
  min-height:100%;
  position:relative;
}
#header {
  background:#FFFF00 none repeat scroll 0 0;
  padding:10px;
}
#body {
  padding:10px 10px 60px;
}
#footer {
  background:#66CCFF none repeat scroll 0 0;
  bottom:0;
  height:60px;
  position:absolute;
  width:100%;
}

Open in new window

rotovibe

ASKER

Savag3
"The url I gave you describes exactly what (I think) you want to achieve. It always keeps the footer at the bottom of the page, even if the content is very small."

Yes this works fine for that. In fact that is the initial layout that I worked with while working on this. But when the content is longer than the initial rendering of the page, I also want it to scroll instead of bleeding over beyond the bottom of the footer.

So I need it to do these core things:
1) have an anchored footer.
2) scroll the content if longer than the height of the initial layout.
3) maximize the screen content to fill the page relative to the footer.

I don't know if that is possible with CSS. I hope I don't have to revert back to frames.

ASKER CERTIFIED SOLUTION

Savag3

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial