understanding
behaviour

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?

wat you want i didnt get ..... – Kamal Aug 28 '12 at 10:25 — Kamal, Aug 28 '12 at 10:25
try this http://jsfiddle.net/Ddffh/11/ – Kamal Aug 28 '12 at 10:27 — Kamal, Aug 28 '12 at 10:27

LazyTarget · Accepted Answer · 2012-08-28T10:35:19.667

2

You shouldn't make the header absolute also remove the padding-top: 75px.

Consider this fiddle: link

EDIT: Updated fiddle: link

edited Aug 28 '12 at 10:35

answered Aug 28 '12 at 10:26

LazyTarget

879
1
14
30

i think this is the better answer, as the others will have the sideeffect that text inside content will overlap with the header. EDIT: Misread the answer a bit... i think the right course of action would be to just remove absolute positioning from the content div. this will preserver the proper 75px padding and remove the scroll bar. – gabtub Aug 28 '12 at 10:30

score 1 · Answer 2 · answered Aug 28 '12 at 10:27

1

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/

answered Aug 28 '12 at 10:27

Kyle

65,599
28
144
152

removing the padding is resolving the problem. But i dont have width and and height set to 100% on body and html. Is that necessary? – ankit0311 Aug 28 '12 at 10:41
Yes, this is necessary for the inner elements to behave as you intend. Just like my example shows. – Kyle Aug 28 '12 at 10:42

score 0 · Answer 3 · answered Aug 28 '12 at 10:43

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

understanding behaviour

3 Answers3

understanding
behaviour