ansaurus

Question

Get <div> to resize when users resizes browser

Answer 1

A:

<!DOCTYPE html>
<html>
<head>
<style>
html, body {width:100%;height:100%;padding:0;margin:0;}
#v {width:50%;height:50%;display:block;background:#000;color:#fff;}
</style>
</head>

<body>
<div id="v">Fixed, I hope.</div>
</body>
</html>

I just tested it. It indeed does work for height.

flam 2010-08-13 04:47:28

Doesn't vertically size properly: http://jsbin.com/ovoka3

strager 2010-08-13 04:56:36

I would like to see someone confirm that this will resize the height of a div when the browser is resized

Sam 2010-08-13 04:56:57

Actually, this only works in quirks mode.

strager 2010-08-13 05:08:21

Sorry, hope this is better (edited my post and a live sample: http://jsbin.com/ufawo3/3)Also please note I read the question before it had been edited. :S

flam 2010-08-13 05:34:17

The % height property never works correctly in my experience.

banzaimonkey 2010-08-13 05:38:53

Answer 2

+3 A:

The right solution depends on the layout of the page. If you just have a single div you want to fill the browser window, I find this CSS the easiest solution:

#theDiv { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

Jacob 2010-08-13 05:01:52

You took the words out of my mouth. This method also allows you to add a consistent gap around the div. Sizing in percentages will fluctuate the size of the gap around the div.

Bryan Downing 2010-08-13 05:09:41

Yeah it looks good and works too! Check my edit to see what's going on

Sam 2010-08-13 05:14:04

I have links above that I always want to be on top for nav

Sam 2010-08-13 05:19:45

ansaurus

tags:

views:

answers:

Get <div> to resize when users resizes browser

related questions