CODEWITHSUNDEEP
htmlasp.netcssheight
user2974961
user2974961

Reputation: 365

Asp.net html layout for 100% height with header, content and footer

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

Upvotes: 1

Views: 3835

Answers (2)

Aamir Shahzad
Aamir Shahzad

Reputation: 6834

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

Upvotes: 1

singularhum
singularhum

Reputation: 5122

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/

Upvotes: 2

Related Questions