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

问题

I feel like this is an easy question, but for whatever reason I can't figure it out today.

I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).

If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.

i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.

I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:

example of the problem

回答1:

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?

回答2:

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.

回答3:

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.

回答4:

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>

来源：https://stackoverflow.com/questions/1890944/html-css-create-a-div-that-always-fills-the-entire-page-and-then-a-resizeabl

标签

html

css

resize