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

  • Thread starter Biranchi Narayan Panda
  • 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
 
A

Alexey Smirnov

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%;
}
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

asp.net button does not work 4
CSS problem 2
How Do I Center This Sample Webpage In Firefox? 4
Object reference not set to an instance of an object. 4
Extending/Inheriting classes to produce valid XHTML from ASP.NETv1.1 8
Error: A page can have only one server-side Form tag. 2
Help with a default page 2
Submit button suddenly stopped working 1

Top