how does the footer div element stick to bottom of screen irrespective of screen height and volume o

  • Thread starter Thread starter Biranchi Narayan Panda
  • Start date Start date
B

Biranchi Narayan Panda

I've used CSS for the master page:
***
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<center>
<div class="container">
|<div class="header">
| . . .
| . . .
| | <div class="menubar">
| | <asp:ContentPlaceHolder ID="MenuContentPlaceHolder"
runat="server">
| | </asp:ContentPlaceHolder>
| | </div>
|
|</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
. . .
. . .
. . .
. . .
. . .

|<div class="footer">
| . . .
| . . .
|</div>

</div>
</center>
</form>
</body>
</html>

*****
Stylesheet:
__________
body
{
background-image: url('images/bg.png');
}
..container
{
background-color: #EFEFEF;
width: 90%;
height: 100%;
}
..header
{
background-image: url('images/headerslice.png');
background-repeat: repeat-x;
text-align: left;
vertical-align: top;
}
..footer
{
background-image: url('images/bottomslice.png');
background-repeat: repeat-x;
background-position: bottom;
}

***

I want the footer to stick to the bottom of the screen, irrespective of
screen size and body contents. (when content height is less then screen
height, like 1/2, the footer remains at middle of screen)

How can I achieve this? Please help with a small example or modifications of
this example.


Thanks
 
I've used CSS for the master page:
***
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <center>
        <div class="container">
            |<div class="header">
            |    . . .
            |    . . .
            |   | <div class="menubar">
            |   |     <asp:ContentPlaceHolder ID="MenuContentPlaceHolder"
runat="server">
            |   |     </asp:ContentPlaceHolder>
            |   | </div>
            |
            |</div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
                . . .
                . . .
                . . .
                . . .
                . . .

            |<div class="footer">
            |    . . .
            |    . . .
            |</div>

        </div>
    </center>
    </form>
</body>
</html>

*****
Stylesheet:
__________
body
{
    background-image: url('images/bg.png');}

.container
{
    background-color: #EFEFEF;
    width: 90%;
    height: 100%;}

.header
{
    background-image: url('images/headerslice.png');
    background-repeat: repeat-x;
    text-align: left;
    vertical-align: top;}

.footer
{
    background-image: url('images/bottomslice.png');
    background-repeat: repeat-x;
    background-position: bottom;

}

***

I want the footer to stick to the bottom of the screen, irrespective of
screen size and body contents. (when content height is less then screen
height, like 1/2, the footer remains at middle of screen)

How can I achieve this? Please help with a small example or modificationsof
this example.

Thanks
Click to expand...

For example you can set an absolute position to pull the div element
out of the flow of the document and set it to the bottom

..footer
{
position: absolute;
bottom: 0;
width: 100%;
}
 
Back
Top