Height Is 100%?

I will a style of asp.net webpage like: body { font-family: Times New Roman, Serif; color: #000000; text-align: center; min-height:100%;

Solution 1:

Use HTML, Body

html, body {
height: 100%;

}

#footer
{
    /*background-color: #008000; */clear: both;
    height:70px;
    position:absolute;
    bottom:0px;      
    margin-top:10px;
    background-image: url('../Images/footer.png');
    background-repeat:repeat-x;
    background-color:Transparent;
}

We need to give 100% height to both the html and the body tag. This is often overlooked but is vitally important as no element will adjust to a percentage height unless it knows what it’s parent height is currently occupying. As the container is a descendant of the body tag which is a descendant of the html tag, then this is required.

100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100%

Solution 2:

Put html { height: 100% } at the beginning and see if it helps.

Solution 3:

Make sure that the height is set to 100% in every point of your Xpath layout hierarchy. That is html->body->form->div id="center"

style="height:100% "

You can then continue using style="height:100% " in the child pages that will inherit from ContentPlaceHolder2 at the inheriting content place holder.

There are areas you might need to adjust(lower) the % height to allow other elements to fit in the area e.g. the other div s.