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

Posted on 2009-02-20
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.
Question by:rotovibe
    LVL 1

    Expert Comment


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

    LVL 30

    Expert Comment

    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.  

    	clear: left;
    	width: 100%;
    	/*background: #387A9B;*/
    	color: #FFF;
    	text-align: center;
    	padding: 4px 0;

    Open in new window


    Author Comment

    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
    LVL 1

    Expert Comment


    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.


       <div id="container">
          <div id="header">
          <div id="content">
          <div id="footer">
    <!-- Relevant css -->
    html, body {
    #container {
    #header {
      background:#FFFF00 none repeat scroll 0 0;
    #body {
      padding:10px 10px 60px;
    #footer {
      background:#66CCFF none repeat scroll 0 0;

    Open in new window


    Author Comment

    "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.

    LVL 1

    Accepted Solution

    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!

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Suggested Solutions

    Title # Comments Views Activity
    erros on link  checking 2 24
    Bullet styles not changing 12 20
    Spacing between <li> 3 13
    PHP foreach DB query 4 21
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Read about why website design really matters in today's demanding market.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    728 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

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now