ansaurus

Question

HTML/CSS: Create a div that always fills the entire page... and then a resizeable div within it?

Answer 1

A:

I keep getting blasted by the CSS purists for this, but I recently solved this problem by using a table.

You need an outer div, set to "position:relative" and 100% height, and then you put a table inside, also 100% each way.

More explanation here: http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html

You're welcome to spurn the table solution. But then I can't help you.

Carl Smotricz 2009-12-11 21:34:08

Answer 2

A:

how about something like this?

if (wholePageDiv.style.height < myDiv.style.height) {
    wholePageDiv.style.height = myDiv.style.height + 10
}

An alternative -- if that background div only needs to be a color -- is to just set the body's background-color to whatever you need. Then you don't need to worry about any javascript resizing of the background.

Zack 2009-12-11 21:34:35

This wouldn't work unless I also modify the whole page div with javascript when the page is first loaded, and then every time the other thing changes size... that's kinda nasty, I'd rather not have to do that.

Keith Palmer 2009-12-11 21:45:29

Answer 3

+2 A:

I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.

Am I missing a requirement that's not addressed by using the body element?

Val 2009-12-11 21:58:13

Answer 4

A:

Holy crap ive solved it, a FULLY CENTERED DIV, enjoy.

EDIT: minor cosmetic fix

Index.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Universal vertical center with CSS</title>

<style>
body {text-align: center;}
p {width: 300px;}
.greenBorder {border: 1px solid green;}
.wrapperA { display: table; width: 1px; height: 1px; margin: 0 auto;}
.wrapperB { display: table-cell; #position: absolute; #top: 50%; vertical-align: middle;}
.wrapperC { #position: relative; #top: -50%;}
</style>

<script language="JavaScript" type="text/javascript">
function resize(id) {
var block = document.getElementById(id);
var htmlheight = document.body.parentNode.scrollHeight;
if (htmlheight > window.innerHeight) {htmlheight = window.innerHeight;}
block.style.height = htmlheight + "px";}
</script>

</head>

<body onload="resize('wrapper')" onresize="resize('wrapper')">
<div class="wrapperA greenBorder" id="wrapper">
<div class="wrapperB greenBorder">
<div class="wrapperC greenBorder">

<p>CENTERED CONTENT</p>

</div>
</div>
</div>
</body>
</html>

Brae 2009-12-14 10:06:43

IE6 goes into infinite loop and browser freeze with that resize code.

S.Mark 2009-12-14 10:13:25

The question didn't say needs to be IE6 compatible, and i personally think coders should start to force people to update by only coding to standards, it would make like that much easier.But hey that's just my excuse for not knowing how to do it in IE6.For everyone else, it works.

Brae 2009-12-14 13:57:15

ansaurus

tags:

views:

answers:

HTML/CSS: Create a div that always fills the entire page... and then a resizeable div within it?

related questions