Question

如果我有高度的div：100％＆amp;宽度：100％，它的背景颜色主要取决于浏览器的高度和宽度。但是如果该div内的内容动态增长，那么div将不会根据内容进行扩展，文本将重叠并流过该div。另一方面，如果我将min-height和min-width设置为100％，那么如果内容长度小于浏览器的窗口，则background-color将不会拉伸到浏览器的高度和宽度。

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

如何制作这样的div，其中background-color将主要覆盖浏览器的窗口大小，但如果内容动态增长，它将能够同时扩展内容。

问候。

Answer 1

我无法理解你的问题，我认为你应该为你的div设置一个正确的溢出属性，

尝试给它overflow: auto;或任何其他合适的

The CSS Overflow Property

Answer 2

我仍然不知道你究竟想要实现的目标。通过你的fiddle sample，只需在内部潜水员周围使用一个实心边框来获得红色周围（而不是另一个带有背景颜色和填充的div）会更容易。但是，如果您不希望文本溢出div，则必须允许div调整大小：

http://jsfiddle.net/JQ7fr/1/

更新

我认为现在就看到你的问题。你试图做的事情是不可能的。你对CSS Box模型的一个基本误解感到沮丧。框的min-height始终指其父级的高度。如果未设置父级的高度，则height默认为auto，这意味着浏览器计算的高度必须与框的内容所需的大小相同。如果您设置min-height！

，也可以这样计算

假设您body的高度为100%，正文与浏览器窗口一样高。如果您的外部div为min-height 100%，它也会与您的浏览器窗口一样高，但由于您未设置height（设置min-height会 NOT 影响height属性！），此框的高度为auto。所以事实上，实际高度（CSS标准称之为“暂定高度”）仅与外部div的内容一样大（不一定是100％），但自min-height以来说它必须是100%它将以100％的高度呈现，无论它的实际高度是什么。如果您现在将内部div的min-height设置为100%，则100％表示“我父级框高度的100％”，父框高度为{ {1}}，它是不 auto！这就是为什么内部div不会填满整个屏幕的原因。

当然你可以给你的外部div 100% height，在这种情况下，将你的内部div的100%设置为min-height将使其填满整个屏幕，但现在外部div实际上只有100％的高度，它不会超过100％（它有一个 FIXED HEIGHT ），即使内部div大于那个也没有，这就是为什么即使黄色超出屏幕高度，红色也不会超出屏幕高度。

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

你可以通过将height设置为{{1}来确保外部div能够按照您想要的方式运行（始终至少填满屏幕的100％，但如果内容需要，则扩展超出此范围） }，因为这里min-height将指向身高，而你的身体有一个固定的高度，但内部div将永远不会那样。好吧，它可以表现这种方式，如果你的外部div有一个固定的宽度，但外部div不会扩展，即使内部div需要它，而不是内部div将溢出超出外部的界限。

我很确定创建一个看起来完全符合你想要的网页的网页是没问题的，但问题是，我们（或我）不知道它看起来应该是什么样子。我怀疑你想要一个带有红色和蓝色边框的丑陋黄页，是吗？到目前为止，这是我们从您那里看到的唯一一页。我不知道你想要实现什么样的色彩效果，无论你是使用图像（或者你应该使用图像）还是页面最终看起来如何。

如何用最小高度制作可扩展的div

2 个答案:

更新