代码之家 › 专栏 › 技术社区 › Keith Palmer Jr.

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

resize css html

Keith Palmer Jr. · 技术社区 · 16 年前

我需要一个div,总是充满整个页面,无论页面有多大。然后我需要另一个div,我可以用javascript重新调整大小(mydiv.style.width文件=x;mydiv.style.height公司=y;)。

i、如果第一个div的背景色是红色,我应该从未

我试过这个,但它不起作用,因为红色背景不能扩展到整个页面的大小:

example of the problem

4 回复 | 直到 16 年前

Val 16 年前

我认为扎克的替代品是最好的答案 body 身体 元素为红色,如果调整内部div的大小,将永远看不到白色。如果您不想将CSS应用于站点中的每个页面,请在要影响的页面正文中添加类或ID,并编写CSS以仅选择具有特定类或ID的正文元素。

身体 元素?

Carl Smotricz 16 年前

欢迎你拒绝餐桌解决方案。但是我帮不了你。

Zack Marrapese 16 年前

像这样的怎么样?

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

另一种选择——如果背景div只需要是一种颜色——就是把身体的背景颜色设置成你需要的任何颜色。那么您就不需要担心任何javascript对背景的调整了。

Neros 16 年前

<!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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前