Fixed footer with 100% height of body and scrollable menu

Question

4.00/5 (1 vote)

See more:

I'm creating a web application through asp.net. My client needs a framework with 1024 px width contentplaceholder with 100% width of header and body section. Also the app needs a scrollable menu which is working perfectly.

The main requirement is the footer needed to be fixed to the bottom of the page and the contentplaceholder needed to set 100% of height. If a page has more content, the entire page needed to be scrolled. I googled and tried several solutions, but returned with no success.

Here[^]is a jsFiddle with the output. and my Final solution has ended with setting min-height for the content div which is not proper way. The 'body-container' div needed to be set to absolute position because of the scroll menu. If we set relative position, the content in this div gets wrapped. The jsFiddle for this frame is here[^]

Please suggest me a solution. Thanks in advance.

Ravi Mallya
--------------------
Coding is Poetry. Enjoying the beauty of coding...

Posted 20-Oct-12 23:33pm

Ravimallya

Updated 22-Oct-12 2:43am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ravimallya · Accepted Answer · 2012-10-26T03:18:00

Finally, I'm ended up with the solution for my problem in a different way using twitter's Bootstrap[^] and some custom css. I used the following css:

CSS

/* styles for layout */
html,body
{
    height:100%;
}

#wrap
{
  min-height: 100%;
}

#main
{
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
    padding-top:40px; /* Height of the navbar */
}

.footer
{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    color:#fff;
}
 /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        .footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

I have had to give padding-top to the main div to get fixed header and used twitter's responsive for the .footer class.

You may refer to the below given jsfiddle demos and edits.
1. Demo without content[^] and edit[^]
2. Demo with content[^] and edit[^]

Credit goes to a blog post of Kevin M. Kev @ MVC[^].

However, I still feel that it's not a complete solution for this. Perhaps, what the solution if we get dynamic height footer? Suggestions and feedback are always welcome.

Ravi Mallya
--------------------
Coding is Poetry. Enjoying the beauty of coding...