Html 如何制作具有最小高度的可扩展div

如果我有一个高度为100%和宽度为100%的div，它的背景色将主要取决于浏览器的高度和宽度。但是如果该div中的内容动态增长，那么div将不会根据内容进行扩展，文本将重叠并在该div上流动。 另一方面，如果我将“最小高度”和“最小宽度”设置为100%，则如果内容长度小于浏览器的窗口，则背景色不会拉伸到浏览器的高度和宽度

html, body{
 height: 100%;
 margin: 0;
 padding: 0;
}
#container{
 height: 100%;
 width: 100%;
 background-color: red;
}

如何制作这样的div，背景颜色将主要覆盖浏览器的窗口大小，但如果内容动态增长，它将能够随着内容同时扩展

---

尊敬。

我不能很清楚地理解您的问题，我认为您应该为div设置正确的溢出属性

尝试赋予它

溢出：自动或任何其他合适的代码

我仍然不知道你到底想要实现什么。从你的角度来看，只需在潜水员的内部使用一个实心边框，就可以得到一个红色的周围（而不是另一个带有背景色和填充的div）。但是，如果您只是不希望文本在
div
中流动，则必须允许
div
调整大小：




更新
我想我现在明白你的问题了。你想做的事情不可能像你想做的那样。您对CSS框模型有一个基本的误解。框的
min height
总是指其父框的高度。如果未设置父对象的高度，则默认情况下，
高度
为
自动
，这意味着浏览器计算的高度与框内容所需的高度相同。如果您设置了
最小高度
，也会这样计算

假设您给
主体
一个高度
100%
，主体与您的浏览器窗口一样高。如果将外部div设置为
100%
的
min height
，它也将与您的浏览器窗口一样高，但是由于您没有设置
height
（设置
min height
不会影响
height
属性！），因此此框的高度为
auto
。因此，事实上，真实高度（CSS标准称之为“暂定高度”）仅与外部div的内容一样大（不一定是100%），但由于
min height
表示它必须是
100%
，因此无论真实高度是多少，它都将以100%的高度呈现。如果您现在将内部div的
min height
设置为
100%
，则这100%表示“我的父框高度的100%”，并且父框高度为
auto
，则它不是
100%
！这就是为什么内部div没有填满整个屏幕

当然你可以给你的外分区一个
height
的
100%
，在这种情况下，将你的内分区的
minheight
设置为
100%
将使它填满整个屏幕，但现在外分区的高度实际上只有100%，它不会扩展超过100%（它有一个固定高度），即使内部div大于这个值，这就是为什么红色不会超出屏幕高度，即使黄色超出屏幕高度

您的外部分区有固定高度，在这种情况下，高度将是固定的（这是固定高度的整个点，不是吗？），或者它有一个灵活的高度，但如果它有一个灵活的高度，它将永远不会“高于”其内容所需的高度（内部分区），因此在内部分区使用
100%
，无论您设置的是
min height
还是
height
都无关紧要，始终是指外部分区高度的100%，该高度将与内部分区所需的高度一样大。我希望您能够理解我在这里所说的

您只需将outer div的
min height
设置为
100%
，就可以让outer div按照您的意愿运行（始终填充至少100%的屏幕，但如果内容需要，可以扩展到该屏幕之外），因为这里的
min height
指的是身体高度，而您的身体有一个固定高度，但内部div永远不会这样做。好吧，它可以这样做，如果你的外div有一个固定的宽度，但是外div不会扩展，即使内div需要它，但是内div会溢出到外div的边界之外

我敢肯定，有些人创建一个网页，让它看起来和你想要的一模一样是没有问题的，但问题是，我们（或我）不知道它应该是什么样子。我怀疑你想要一张难看的黄页，周围有红蓝相间的边框，是吗？然而到目前为止，这是我们从你们那里看到的唯一一页。我不知道你想要达到什么样的色彩效果，你是否在使用图像（或者你是否应该使用图像），或者页面最终会是什么样子。
如果内容“动态增长”超过窗口边界，你会怎么做？因为如果你有100%的高度和宽度，它会填满整个东西。对不起，我不明白你说了什么。你为什么不在
主体
元素上设置背景色呢？在这种情况下，无论
div
的实际大小，整个浏览器窗口都会设置背景色。因为这是我的网页布局，其中的主要内容区域将不同于主体颜色。但您说过
div
应该填充整个浏览器窗口，那么，您将如何看到
body
标记的背景色呢？你自己说过：“如果我将最小高度和最小宽度设置为100%，那么如果内容长度小于浏览器的窗口，背景颜色将不会拉伸到浏览器的高度和宽度。”因此，对我来说，听起来你希望
div
拉伸以填充所有内容，但如果它填充