understanding <div> behaviour - css

Question

With refrence to this question and the accepted answer, I tried doing something similar.
.Content
{
position:absolute;
top:0;
left:0;
padding-top:75px;
width:inherit;
height:inherit;
}
.Header
{
position:absolute;
top:0;
left:0;
height:75px;
width:inherit;
background-color:Blue;
text-align:center;
}
<form id="form1" runat="server" style="width:100%;height:100%">
<div id="Content" class="Content">
<div id="Header" class="Header">
<h1 style="color:White">Report Portal</h1>
</div>
</div>
</form>
I want the content area to fill the entire page, no more. But vertical scroll bars appear for the web page with the above html. How can I correct that?

Answer 1

You shouldn't make the header absolute also remove the padding-top: 75px.
Consider this fiddle: link
EDIT: Updated fiddle: link

Answer 2

Do you have width and height set to 100% on the body and hmtl?
Also, the padding is creating a vertical scrollbar, remove this and it will work as expected.
http://jsfiddle.net/Kyle_Sevenoaks/MqKXH/

Answer 3

You have put Height > inherit for "Content".
CSS Inheritance (http://dorward.me.uk/www/css/inheritance/)
CSS inheritance works on a property by property basis. When applied to an element in a document, a property with the value 'inherit' will use the same value as the parent element has for that property.
Overall, "Content" height is already 100% of the browser which is inherited from "form" tag. After adding padding from top ie "75px" ..its total height becomes "browser height + 75px". It reasons to scroll the page.
Solution :
1] Avoid the top padding to "Content". Give that padding to its inner container
2] use style
body, html{
overflow:hidden;
}