0

If I have a div with height:100% & width:100%, it's background color will be up to the browser's height and width primarily. But if the content inside that div grows dynamically, then, the div will not expand according to the content, text will be overlapped and flows over that div. On the other hand, if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width.

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

How to make such div which background-color will cover up browser's window size primarily but if the content grows dynamically, it will be able to expand with content at the same time.

Regards.

4

2 回答 2

0

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

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


更新

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

假设您给出body的高度为100%，主体与浏览器窗口一样高。如果给你的外部 div 一个min-height，100%它也会和你的浏览器窗口一样高，但是由于你设置了no height（设置min-height不影响height属性！），这个框的高度是auto。所以实际上，实际高度（CSS 标准称之为“暂定高度”）仅与外部 div 的内容一样大（不一定是 100%），但既然min-height说它一定是100%，它将以 100 的高度呈现%，不管它的真实高度是多少。如果您现在将min-height内部 div 设置为100%，则那些 100% 表示“我父框高度的 100%”并且父框高度是auto，它不是 100%！这就是为什么内部 div 不会填满整个屏幕的原因。

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

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

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

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

于 2013-07-29T16:48:47.527 回答
0

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

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

CSS 溢出属性

于 2013-07-29T16:07:06.573 回答