PDA

View Full Version : how do I



timgolding
Nov 22nd, 2006, 01:44 PM
I still am looking for a ways to streach any box element to fit the view port. For instance a sidebar div that I want to fill the page right to the edge of the view port. I have tried 100% before but seems. only to fill the view port as it was when the browser window was opened, but it doesn't streach with the browser window as it is resized. I have tried using absolute positioning before with out any luck

ahallicks
Nov 22nd, 2006, 02:34 PM
100% should stretch a div 100% of the page minus any padding the page has. Do you have an example of what you need doing, or a link to the site you are working on? Make sure you don't set a width or height other than 100%, i.e. in pixels.

timgolding
Nov 22nd, 2006, 03:07 PM
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="height:100%; width:100%; background-color:#2FA;">
<div>
sadfsadff
</div>
</div>
</body>
</html>


If I remove the doctype declaration then it seems to work in all browsers but with it in I get problems. I have no idea why?

ahallicks
Nov 22nd, 2006, 03:43 PM
Remove the XML bit, you don't need that, then see what happens

ronaldb66
Nov 22nd, 2006, 04:05 PM
While CSS natively supports widths adjusting to the viewport, heights are a different matter.
For this to work, you'll need to set the height of the html and body elements to 100% as well, and your div needs to be the only parent of body; everything else should be a child of this container.
You will also need to set margins and padding on the body element to zero.

timgolding
Nov 23rd, 2006, 10:05 AM
thx ill have a look