HTML/CSS : Create a div that always fills the entire page. .. 然后里面有一个可调整大小的 div?

标签 html css resize

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

我需要一个始终填满整个页面的 div,无论该页面有多大。然后我需要另一个 div,我可以用 javascript (mydiv.style.width = x; mydiv.style.height = y;) 重新调整大小。

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

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

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

example of the problem

最佳答案

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

我是否遗漏了使用 body 元素无法解决的要求?

关于HTML/CSS : Create a div that always fills the entire page. .. 然后里面有一个可调整大小的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1890944/

相关文章:

ios - 使具有动态高度 subview 的 UIScrollView 自动与自动布局一起工作

html - 调整浏览器大小时阻止网页上的元素移动

javascript 已连接,但不知何故,innerhtml 未更新

php - <head> 在 Chrome 中显示为空

html - 使图像位于部分滚动站点的底部

css - 将图像裁剪成圆形 rmagick + rails

html - 我有没有更短的方法来编写这段代码?

css - 在 firebug 或 chrome 开发工具中将 ems/rems 增加 0.1?

html - 表格布局为 :fixed and resizing IE8 vs IE 7/Chrome 的表格

html - 如何在css3中创建阴影框