Question

我觉得这是一个简单的问题，但无论出于何种原因，我今天都无法弄明白。

我需要一个总是填满整个页面的div，无论该页面有多大。然后我需要另一个div，我可以用javascript重新调整大小（mydiv.style.width = x; mydiv.style.height = y;）。

如果第二个div的大小调整为高于现有浏览器窗口高度，则第一个div应调整大小以适应。

即。如果第一个div的背景颜色是红色，我应该从不看到任何白色背景颜色，因为第一个div总是扩展到整个页面的大小。

我试过这个，它不起作用，因为红色背景没有扩展到整个页面的大小：

Answer 1

我认为Zack的替代是最好的答案：body元素是一个块级元素，总是填充整个“页面”。您可以使用JavaScript和CSS挂钩，就像使用div一样。将您的body元素换成红色，如果您的内部div调整大小，您将永远不会看到白色。如果您不希望将CSS应用于站点中的每个页面，请将类或ID添加到要影响的页面主体，并编写CSS以仅选择具有特定类或ID的主体元素。

我是否错过了使用body元素无法解决的要求？

Answer 2

我一直受到CSS纯粹主义者的抨击，但我最近通过使用表解决了这个问题。

你需要一个外部div，设置为“position：relative”和100％height，然后你把一张桌子放在里面，单程也是100％。

此处有更多解释：http://wondersofcomputing.blogspot.com/2009/07/table-height-browser-window-height.html

欢迎您摒弃桌面解决方案。但后来我无法帮助你。

Answer 3

这样的事情怎么样？

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

另一种选择 - 如果背景div只需要是一种颜色 - 就是将身体的背景颜色设置为你需要的颜色。然后你不必担心任何调整背景的javascript大小。

Answer 4

神圣的垃圾解决了它，一个完全中心的DIV，享受。

编辑：小修饰

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>

HTML / CSS：创建一个总是填充整个页面的div ......然后是一个可调整大小的div？

4 个答案: