Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS Body Scrolling
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 21-Oct-12 0:33am
Edited 22-Oct-12 3:43am
v2

1 solution

Rate this: bad
good
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 */
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...
  Permalink  

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

  Print Answers RSS
0 OriginalGriff 277
1 Maciej Los 240
2 DamithSL 200
3 Raul Iloc 185
4 Richard MacCutchan 175
0 OriginalGriff 5,130
1 DamithSL 4,197
2 Maciej Los 3,670
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,821


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 26 Oct 2012
Copyright © CodeProject, 1999-2014
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