?
Solved

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

Posted on 2009-02-20
6
Medium Priority
?
1,179 Views
Last Modified: 2013-11-19
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
0
Comment
Question by:rotovibe
  • 3
  • 2
6 Comments
 
LVL 1

Expert Comment

by:Savag3
ID: 23701839
Hi,

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

Greets,
Tjeerd
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23707072
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

0
 

Author Comment

by:rotovibe
ID: 23707144
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:Savag3
ID: 23710687
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

0
 

Author Comment

by:rotovibe
ID: 23712695
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.

0
 
LVL 1

Accepted Solution

by:
Savag3 earned 1500 total points
ID: 23761181
That boils down to the same thing, I think.

I can't test this right now but it's an interesting question and maybe I'll try to do this later.

If you find your sure solution be sure to post it!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.
Suggested Courses
Course of the Month15 days, 18 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question