当前位置：文江博客话题详情

HTML/CSS：创建一个始终填充整个页面的 div...然后在其中创建一个可调整大小的 div？

发布于 2024-08-13 23:15:22 字数 430 浏览 3 评论 0原文

我觉得这是一个简单的问题，但出于某种原因我今天无法弄清楚。

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

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

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

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

傾旎 2024-08-20 23:15:22

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

我是否缺少使用 body 元素无法解决的要求？

回复收藏 0 原文

鲸落 2024-08-20 23:15:22

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

你需要一个外部 div，设置为“position:relative”和 100% 高度，然后你在里面放一个表格，每个方向也是 100%。

欢迎您拒绝表格解决方案。但那样我就帮不了你了。

回复收藏 0 原文

不离久伴 2024-08-20 23:15:22

像这样的事情怎么样？

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

另一种选择 - 如果背景 div 只需要一种颜色 - 就是将正文的背景颜色设置为您需要的任何颜色。那么你就不需要担心任何 javascript 调整背景大小的问题。

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.

回复收藏 0 原文

呢古 2024-08-20 23:15:22

天哪，我解决了它，一个完全居中的 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>

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>

回复收藏 0 原文

~没有更多了~