Prev: How will the Footer div stick to bottom of screen?
Next: Drop Down List, AutoPostBack
From: Biranchi Narayan Panda on 17 Feb 2010 02:08
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


From: Alexey Smirnov on 17 Feb 2010 02:51
On Feb 17, 8:08 am, "Biranchi Narayan Panda"
<biranchi_pa...(a)hotmail.com> wrote:
> 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

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%;
}
 | 
Pages: 1
Prev: How will the Footer div stick to bottom of screen?
Next: Drop Down List, AutoPostBack