HTML / CSS：创建一个总是填充整个页面的div ...然后是一个可调整大小的div？ [英] HTML/CSS: Create a div that always fills the entire page... and then a resizeable div within it?

问题描述

我觉得这是一个简单的问题，但无论出于什么原因，我今天无法想出。

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

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

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

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

问题的示例

解决方案

我认为Zack的替代是最好的答案： body 元素是一个块级元素，整个页面。你可以使用JavaScript和CSS钩住它，就像你可以用一个div。颜色你的 body 元素红色，你永远不会看到白色，如果你的内部div调整大小。如果您不希望将CSS应用于网站中的每个网页，请在要影响的网页正文中添加类或ID，然后编写CSS以仅选择具有特定类或ID的主体元素。 p>

我缺少一个不能通过使用 body 元素来处理的需求？

I feel like this is an easy question, but for whatever reason I can't figure it out today.

I need a div that always fills the entire page, no matter how large that page is. Then I need another div which I can re-size with javascript (mydiv.style.width = x; mydiv.style.height = y;).

If the second div is resized to be taller than the existing browser window height, the first div should resize to fit.

i.e. If the first div's background color is red, I should never see any white background color, because the first div always expands to the size of the entire page.

I tried this, it doesn't work because the red background doesn't expand to the size of the entire page:

example of the problem

解决方案

I think Zack's alternate is the best answer: the body element IS a block-level element that always fills the entire 'page'. You can hook into it with JavaScript and CSS, just as you can with a div. Color your body element red and you'll never see white if your inner div is resized. If you don't want your CSS applied to every page in your site, add a class or ID to the body of the page you want to affect, and write your CSS to select only body elements with a specific class or ID.

Am I missing a requirement that's not addressed by using the body element?

这篇关于HTML / CSS：创建一个总是填充整个页面的div ...然后是一个可调整大小的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！