ansaurus

Question

How do you make an HTML page fit the web browser size?

Answer 1

A:

In order to use the width:100% CSS property on an element, the element's parent needs to have a defined height.

The parent div of your main div is body. So you need to apply height: 100% to the body tag:

<body style="height: 100%">

EDIT: to make sure nothing overflows, you also want to apply margin: 0 and padding: 0 to body.

hundredwatt 2010-06-28 20:19:24

That didn't work. It still does the exact same thing.

Jonathan Sternberg 2010-06-28 20:22:15

Try adding `height:100%` to the `<html>` tag: `<style type="text/css">html { height: 100%; padding: 0; margin:0; }</style>`This might fix it for IE

hundredwatt 2010-06-28 21:37:35

Answer 2

A:

As far as I know, the only sure way to achieve this is with some javascript.

Using jQuery:

$(document).ready(function() {      // Wait for the HTML to finish loading.
  var resize = function() {
    var height = $(window).height();  // Get the height of the browser window area.
    var element = $("body");          // Find the element to resize.
    element.height(height);           // Set the element's height.
  }
  resize();
  $(window).bind("resize", resize);
});

If you're covering multiple browsers, you may need to tweak this a bit.

John Fisher 2010-06-28 20:32:56

I couldn't use jQuery, but the same concept worked. http://www.howtocreate.co.uk/tutorials/javascript/browserwindow for the IE specific things.

Jonathan Sternberg 2010-06-29 14:20:17

ansaurus

tags:

views:

answers:

How do you make an HTML page fit the web browser size?

related questions