i want to resize the div with scroll bar as per the browser window size and shld be applicable to any browsers
if i used height / width 100% its applicable only in IE not in FF
i tried with lots of css and java script
uisng the viewport size i do get the needed result but on resizing the browser window he div gets shifted
This should work in modern browsers plus IE7 (but not IE6 and older):
#my-div-id {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
}
I’m not really sure what you mean but the following CSS will give you a div that takes up 100% height and width in all browsers.
html {
height:100%;
}
body {
height:100%;
margin:0px;
}
.myDiv {
float:left;
height:100%;
width:100%;
background-color:#FF0000;
}
its solved by taking the viewport width/height of screen and assigning it to the div using javascript
Yes, but that’s using a screwdriver to bang in nails. You can do it, but using a hammer (CSS) is usually a better idea. 
by using just css how do i get and set the div for different screen resoultion?
I illustrated that in post #2 above.
as per the postings in this forum i used the follwoing
<div id=“div1” style=“position:fixed; float:left; height:100%; overflow:auto; width:100%; right:0; bottom:0; left:0;”>
<body style=“height:100%; margin:0px;”>
its wrking fine so far but the only concern is by using the above the div gets placed at the top and the controls/buttons/elements above this div gets hidden
there are few controls/emenets above this div in a <table>
If you elaborate your problems and what you try to accomplish starting the thread, it is easier to get what you need and you will get more people answering and more presice help.
No offense; when you add more info after the first post and the picture changes at least I find it frustrating and hesitate further answer.
You can’t combine float and absolute positioning (fixed positioning is a subtype of absolute positioning). The float:left declaration will be ignored, so you should leave it out. Setting height:100% is pointless when you have top:0 and bottom:0, and the same goes for width:100% vs left:0 and right:0. The percentage height requires that you have an explicit height declared for the containing block, too, so I’d recommend leaving out the height and width declarations.
Now I’m confused. You said you wanted a div that would cover the entire viewport, but now you’re saying there should be stuff above it? 
in my aspx page i have few controls at top with logo
below it is my div with gridview populated with data frm database
as per the postings in this forum i used
<body style=“height:100%; margin:0px;”>
<div id=“div1” style=“position:fixed; float:left; height:100%; overflow:auto; width:100%; right:0; bottom:0; left:0;”><asp:gridview></asp:gridview></div>
i dont want the gridview to scroll hence used div for fixing it to screen width, height
by above lines i do get wht i need ie the gridview in the div fixed to the screen width height and with div scroll bar for scrolling data
but by using the above the elements at the top of mydiv goes behiind my div and hence not visible
i want the elemets to be visible as they are
and below it mygrid with the present effect
that smy page layout
top there is logo and some links for login etc
and then starts the div with gridview
can anybody help me
in the above as everytime i click the page the layout chnages
Let’s see if I understand what you want (it would help a lot if you could write in complete sentences, using punctuation, and beginning sentences with a captial letter; why make it harder than necessary for those who are trying to help you?).
At the top of the page you have some sort of header with controls. Below that you want an element that fills the rest of the viewport and has a scrollbar if its content is taller than the container.
If so, this should work if your header has a known height:
#div1 {
position:fixed;
top:3em; /* or whatever the header height is */
right:0;
bottom:0;
left:0;
overflow:auto;
}
Or, if you insist on using inline CSS,
<div id="div1" style="position:fixed; top:3em; right:0; bottom:0; left:0; overflow:auto">
<asp:gridview></asp:gridview>
</div>
hi
used the above css it works fine
but again there is browser prblm
the top content is having a height of 5em;
by using the above in IE the spacing between the top matter and the below div is proper
but in FF the spacing is more and disturbaance in page layout
i need to take care of all the things of the page
Try a reset
Add this to your external Stylesheet.
If you don’t have an external Stylesheet, I strongly suggest you Google it to find out more and then implement it as you are essentially shooting yourself in the foot by using inline styles. It makes your HTML weighty and hard to decipher, and also when you come to update your site and you want to change the colour of say the paragraph tag, you wont have to go through and find everywhere it’s defined and used (easily 100+ in a fairly small site).
Instead, you go to your CSS file and change the one declaration of p and it will change the style of every paragraph targeted.
It makes it a hell of alot easier for people to help you too, as we wont have to wade through tones of redundant gumpf when the same could be declared once in an external CSS file and then referenced when you need it.
So add this to the very top of your external css file (line 1, this is very important!)
* {
border: 0;
margin: 0;
padding: 0;
}
This will globally reset the border, margin and padding attributes of all elements to 0.
This will help with cross-browser compatibility as all browsers use their own defaults. This resets that and starts them all off on an even playing field.
Make sure the first element inside your #div1 doesn’t have a top margin.
I wouldn’t recommend the draconian reset that james_littler posted above, since it will have side-effect that can cause more problems that it solves – especially if you add it to an existing design.
You’ll have to explicitly specify every margin and padding you do want, even if the browser defaults would be perfectly all right. That means code bloat. Also, some browsers won’t allow you to change the padding twice for certain form controls, which can make, e.g., select lists unusable.
Perhaps if your design is one of those pixel-perfect I’m-really-a-print-designer types. (J/K)
Seriously, in many designs you don’t need exact control over every single padding and margin. Then it seems unnecessary to first reset everything and then have to add them back again. Isn’t it better to just be explicit about the ones you really need to change?
Hi
You reset everything to make it all 0 and have a fresh start. Most people either use the universal reset or Eric Meyers reset. You don’t always declare margins and paddings on every element. If you don’t it could add margins or paddings by browser default that makes it exceed your “px perfect design” and make it overflow the 100% width, and if using floats it will drop down to the next line. Not exactly preferable eh?
Cheers.
James, it looks like I completely mangled your post! I must have hit the ‘Edit’ button instead of the ‘Quote’ button! 
I’m really sorry! It now looks as if I asked your questions and you provided my answers. My sincere apologies!