Click here to Skip to main content
13,093,184 members (82,421 online)
Rate this:
Please Sign up or sign in to vote.
See more:
I'm creating a web application through 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
Updated 22-Oct-12 2:43am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

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:
/* styles for layout */
  min-height: 100%;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
    padding-top:40px; /* Height of the navbar */
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
 /* 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...

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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web02 | 2.8.170813.1 | Last Updated 26 Oct 2012
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100