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

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

resize css html

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

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

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

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

example of the problem

4 回复 | 直到 15 年前

Val 15 年前

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

身体 元素?

Carl Smotricz 15 年前

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

Zack Marrapese 15 年前

像这样的怎么样?

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

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

Neros 15 年前

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

推荐文章

zxcvbnm · 为什么字符串::resize和字符串::substr O(1)

3 年前

Heinz · 无法调整非模式html对话框设置style='resize:both'的大小,但可用于模式对话框

3 年前

Alex Cai · 未最大化后的AWT面板布局问题

3 年前

GoGoAllen · 如何针对所有类型的浏览器大小修复我的网页布局?

7 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

7 年前

Jojo Narte · 如何将UIView调整为特定的高度和宽度,包括其子视图?

7 年前

Tarzan · Python调整图像大小

7 年前

Eddy · 调整窗体大小时调整标签字体大小

7 年前

Nemo XXX · 如何在QTableView中按比例调整列宽?

7 年前

Brian Hamill · Numpy调整图像大小/重缩放图像

7 年前