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

Question

如果我有一个高度：100% 和宽度：100% 的 div，它的背景颜色将主要取决于浏览器的高度和宽度。但是如果那个div里面的内容是动态增长的，那么这个div就不会根据内容展开，文本会重叠流过那个div。 另一方面，如果我将 min-height 和 min-width 设置为 100%，那么如果内容长度小于浏览器的窗口，背景颜色将不会拉伸到浏览器的高度和宽度。

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

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

问候。

Answer 1

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

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

更新

我想现在看到你的问题了。您尝试做的事情不可能像您尝试做的那样。您对 CSS 盒模型的基本误解而堕落。盒子的min-height 总是指其父级的高度。如果未设置父级的高度，则height 默认为auto，这意味着高度由浏览器计算为适合框内容所需的大小。如果你设置min-height!

假设你给body一个高度100%，body和你的浏览器窗口一样高。如果给您的外部 div 一个 min-height 或 100%，它也将与您的浏览器窗口一样高，但是由于您没有设置 height（设置 min-height 确实 NOT 影响@ 987654337@ 属性！），此框的高度为auto。所以事实上，真实高度（CSS 标准称之为“暂定高度”）只和你的外部 div 的内容一样大（不一定是 100%），但因为 min-height 这么说必须是 100% 它将以 100% 的高度渲染，而不管它的 真实高度 是多少。如果您现在将内部 div 的 min-height 设置为 100%，则那些 100% 表示 “我的父框高度的 100% 高度” 并且父框高度为 auto，它不是 100%！这就是为什么内部 div 不会填满整个屏幕的原因。

当然你可以给你的外层 div 一个 height 或 100%，在这种情况下，将你的内层 div 的 min-height 设置为 100% 将使它填满整个屏幕，但现在外层 div 是真的只有 100% 的高度，它不会扩展超过 100%（它有一个 FIXED HEIGHT），即使内部 div 比那个大，这就是为什么红色不会超出屏幕的原因高度，即使黄色超出屏幕高度。

要么你的外部 div 有一个固定的高度，在这种情况下高度将是固定的（这是固定高度的全部点，不是吗？）或者它有一个灵活的高度，但如果它有一个灵活的高度，它永远不会“高于”其内容（内部 div）所需的值，因此在内部 div 处使用100%，无论您设置min-height 还是height 都没有关系，始终指的是 100%外部 div 的高度，并且该高度将与内部 div 所需的一样大。我希望你能明白我在说什么。

只需将 min-height 设置为 100%，您就可以让外部 div 以您想要的方式运行（始终填充至少 100% 的屏幕，但如果内容需要，可以扩展超出此范围），因为这里min-height 指的是身体高度，你的身体有一个固定的高度，但内部 div 永远不会那样做。好吧，如果您的外部 div 具有固定宽度，那么它可以表现得这样，但是外部 div 不会扩展，即使内部 div 需要它也不会扩展，而是内部 div 将 溢出 超出外部的边界。

我很确定有些人创建一个与您希望的外观完全一样的网页是没有问题的，但问题是，我们（或我）不知道它应该是什么样子.我怀疑你想要一个丑陋的黄色页面，周围有红色和蓝色边框，是吗？然而到目前为止，这是我们从您那里看到的唯一一页。我不知道你想要达到什么样的色彩效果，是使用图像（或者是否应该使用图像），或者页面最终会是什么样子。

Answer 2

我不太清楚你的问题，我认为你应该为你的div设置一个正确的溢出属性，

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

The CSS Overflow Property