1

I have this page layout and am trying to make it occupy 100% of the height by expanding the content area and leaving the footer visible at the bottom of the page. But for some reason the content area is not expanding. Do you know what I need to change in the code?

<body>
 <form id="form1" runat="server">
 <div>
   <div class="main">
        <div class="header">      
            This is the header
        </div>            
        <div class="content">
            This is the content
        </div>
        <div class="footer">    
            This is the footer
        </div>
    </div>

 </div>
 </form>
</body>

And here is the css

html, form
{
 height: 100%;
}

body
{
 padding: 0px;
 margin: 0px;    
 background-image: url('../back.jpg');     
 height: 100%;
}

.main
{    
 margin: 0px auto;
 width: 100%; 
 height: 100%;
}
.header
{
 float: left;
 width: 100%;
 background-color: Yellow;
 height: 80px;
}
.content
{
 width: 960px;
 margin: 0 auto;
 background-color: Gray;  
 height: auto;
 min-height: 100%; 

}
.footer
{   
 width: 960px;
 background-color: Green;
 margin: 0px auto;  
 height: 50px;    
}

Thanks

user2974961
  • 335
  • 1
  • 6
  • 14

2 Answers2

2

You need to remove the extra div that has no class specified. Since that div has no height specified, the 100% height you are setting in the div with class main will not work.

<body>
    <form id="form1" runat="server">
    <div class="main">
        <div class="header">
            This is the header
        </div>
        <div class="content">
            This is the content
        </div>
        <div class="footer">
            This is the footer
        </div>
    </div>
    </form>
</body>

UPDATE

Okay so fixing your issue with the footer not "sticking" to the bottom of the page, I modified part of your css.

.content
{
    width: 960px;
    margin: 0 auto;
    background-color: Gray;
    padding-bottom: 50px;
    min-height: 90%;
}

.footer
{
    position: fixed;
    bottom: 0;
    left: 50%;
    width: 960px;
    margin-left: -480px;
    height: 50px;
    background-color: Green;
}

.content
padding-bottom: 50px; This is so extra content does not overflow into the space occupied by the footer.

.footer
position: fixed; We need this to force the positioning of the footer.
bottom: 0; This will force the footer to the bottom of the page.
left: 50%; Puts the left side of the footer div in the middle of the page.
margin-left: -480px; Move the div left of half of the width of the footer so it is now centered on the page.

Example 1: http://jsfiddle.net/nG9sm/
Example 2, lots of text: http://jsfiddle.net/9Up5F/

singularhum
  • 5,072
  • 2
  • 24
  • 32
  • Thanks for your answer, but even removing the div the footer hides and shows just when scrolling down. I wanted it to show the footer without the scroll. – user2974961 Feb 22 '14 at 21:18
  • @user2974961 I updated my answer, let me know if that is okay or not. – singularhum Feb 22 '14 at 22:34
  • Hi singularhum, the proposed solution Works just with small amount of content. If the content area needs more space than available on the screen to put the content, the content ends up behind the footer instead of creating the scrool bar leaving the footer at the bottom of the content area. – user2974961 Feb 23 '14 at 14:35
  • @user2974961 did you take a look at the second jsfiddle example in my answer? It works with content going past the screen. The content should not go underneath the footer because of the padding-bottom on the .content style. – singularhum Feb 23 '14 at 14:51
  • Hi singularhum, I took a look at it and the text in the fiddle goes at the back of the footer. – user2974961 Feb 23 '14 at 17:47
  • @user2974961 you don't see the scrollbar on the side? – singularhum Feb 23 '14 at 17:50
  • yes I see the scrollbar on the side. But before scrolling the content is behind the footer as the footer is being displayed. The idea is to display the footer just after the whole content is displayed. I could get it working using the solution proposed by http://ryanfait.com/resources/footer-stick-to-bottom-of-page/. Anyway, thanks a lot for your help. Really appreciated. – user2974961 Feb 23 '14 at 20:44
  • @user2974961 Ooohh okay, that was unclear, thought you meant the footer would always be visible. No problem though glad you figured it out. – singularhum Feb 23 '14 at 20:46
1

Your code has extra div with no class just remove it, it will fix the issue.

Updated fiddle

Update your .footer CSS:

.footer
{   
 width: 960px;
 background-color: Green;
 margin: 0px auto;  
 height: 50px;    
 position: absolute;
 bottom: 0;
}

or

.footer
{   
 width: 960px;
 background-color: Green;
 margin: 0px auto;  
 height: 50px;    
 position: fixed;
 bottom: 0;
}

Help Link

Make footer stick to bottom of page correctly

Community
  • 1
  • 1
Aamir Shahzad
  • 6,683
  • 8
  • 47
  • 70
  • Sorry, I forgot to remove that div before posting the question here. In fact the code I wanted to post for your review should not have that div. That said, even without that div, the footer is not displayed. It becomes hidden and a scroll bar is displayed on the right side for vertical scroll. I wanted the footer to display as part of the 100% height. – user2974961 Feb 22 '14 at 21:16
  • Hi Aamir, Your code got the footer fixed at the bottom left, not centered. But that I could fix that with the solution proposed by singularhum below, which is to set left: 50% and margin-left: -480px; The real issue with this solution is that it doensn't work when there's lots of content in the content area. In that case the footer stays on the same place and the content area continues on its back. – user2974961 Feb 23 '14 at 14:32
  • 1
    Aamir, I got it working using a link that I found on the link you sent me. Many thanks for the help. – user2974961 Feb 23 '14 at 20:45