A "div" which never exceed the browser

Question

I'm working with Visual Studio, ASP.net, HTML, CSS, C# (for the code behind), ADO.net and Javascript/Jquery.

I'm trying to make a web page with some div block and I want that the block never exceed the browser. Do you know : how to add a height size for div even if I change the resolution of my window?

PS: I'm French so, please, don't be matter about my mistake.

possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — jcvandan, Apr 17 '13 at 13:00
yes give height,width in %, it will not effected by the resolution and also you can give % height,width in point also for eg: height: 90.5%; — Vijay Singh Rana, Apr 17 '13 at 13:03

score 1 · Answer 1 · answered Apr 17 '13 at 13:04

1

Without further clarification of your senario, one method is to do the following:

HTML

<div id="test">
    My div
</div>

CSS

html, body {height:100%;margin:0;padding:0}
#test {width:100%; height: 100%;position:absolute;}

answered Apr 17 '13 at 13:04

Dom

218
1
6

Thanks, I will trying that =D – user2265252 Apr 17 '13 at 13:48
Let me know if you have any problems! – Dom Apr 17 '13 at 13:51
Thanks ;) I had an other question. If I had two div which have both height : 50%. Then I hide the first div. It is possible to past the height of second div to 100% ? – user2265252 Apr 18 '13 at 15:20
Sure is, http://jsfiddle.net/domsammut/qvjKh/ Delete the first div and see the result. – Dom Apr 18 '13 at 22:45
thanks, i will trying it. But, what is the utility of #one ~ #two ? I don't know the symbol "~"... – user2265252 Apr 19 '13 at 07:21
You can find out more information about it here http://www.w3schools.com/cssref/sel_gen_sibling.asp – Dom Apr 19 '13 at 07:27
Thanks, it work when I delete my bloc in the code ^^. A last little question : How I can suppress a div and re-create it ? With javascript ? – user2265252 Apr 19 '13 at 09:44
That's probably the easiest way to do it. You can hide the element instead of deleting it if the contents of the div isn't changing. – Dom Apr 19 '13 at 09:48
Thanks again I found it. With jquery : $('#theDiv').slideToggle(0); – user2265252 Apr 19 '13 at 09:58

score 1 · Answer 2 · answered Apr 17 '13 at 13:05

1

Setting height to 100% usually works. NOTE: Sometimes padding may push you beyond the browser.

answered Apr 17 '13 at 13:05

mhd031

61
4

score 0 · Answer 3 · answered Apr 25 '13 at 05:28

I've encountered screen resolution problem before and this solved my problem.

If you want your website to dynamically changing whenever your screen resolution change you can use % in your css to all your page, containers, wrappers etc. so that it will adjust on any screen resolution. (problem: This destroys your web design whenever the screen resolution is big)
The best solution I find so far and I think other professional websites also is doing is to make your width static or fixed and just let your page get on the center. This will preserve the design you made on your page and everything will stay and looks as it is.

In your CSS just add this line on your page ,containers, wrappers etc.

margin:0 auto;

and your site will be centered to any screen resolution. For more examples and to read more about it check this reference How to Center a Website With CSS. If you want to test different screen resolutions without changing your actual screen resolution you could try it here.

Hope this helps :)

A "div" which never exceed the browser

3 Answers3