如何用最小高度制作可展开的div [英] How to make expandable div with min-height
问题描述
如果我有一个高度为100％的div，宽度：100％，它的背景色主要取决于浏览器的高度和宽度。但是，如果该div内的内容动态增长，那么div不会根据内容进行扩展，文本将被重叠并流过该div。
另一方面，如果我将min-height和min-width设置为100％，那么如果内容长度小于浏览器的窗口，background-color将不会拉伸到浏览器的高度和宽度。
html，body {
height：100％;
保证金：0;
padding：0;
}
#container {
height：100％;
宽度：100％;
背景颜色：红色;
}
如何制作这种div背景颜色将主要覆盖浏览器的窗口大小但如果内容动态增长，它将能够同时扩展内容。
问候。
我仍然不知道你实际上想要达到什么目的。通过你的小提琴示例，只要在内部潜水员周围使用坚实的边框会容易得多得到一个红色的周围（而不是另一个具有背景色和填充的div）。但如果您不希望文本过度流入 div ，则必须允许 div 调整大小：
更新
我想现在就看你的问题。你试图做的事情不可能像你试图做的那样。您对CSS Box模型的根本误解正在陷入困境。一个盒子的 min-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 ％<父母高度的高度，父母身高< > 100％！这就是为什么内部div不会填满整个屏幕。
当然，您可以给外部div一个 height 100％，在这种情况下，将内部div的 min-height 设置为 100％将使其填满整个屏幕，但现在外部div的高度仅为100％，不会超过100％（它具有 FIXED HEIGHT ），即使内部div大于该值，这也是为什么红色不会超出屏幕高度的原因，即使黄色超出了屏幕高度。
你的外部div有一个固定的高度，在这种情况下，高度将是固定的（这是一个固定高度的整点，不是吗？）或者它有一个灵活的高度，但如果它有一个灵活的高度，它将永远不会比它的内容（内部div）更高，因此在内部div使用 100％，无论你设置 min-身高或身高并不合适ter，总是指外部div高度的100％，并且其中一个将与内部div的要求一样大。我希望你能够理解我在这里说的话。
你一定可以让外部div按你想要的方式行事（总是至少填充100％如果内容需要它，只要将其设置为 min-height 到 100％这里 min-height 会指身高，身体有固定高度，但内部div永远不会这样。那么，如果你的外部div具有固定的宽度，那么外部div就不会展开，即使内部div需要它，内部div也会超过外部边界的边界。
我敢肯定，创建一个完全按照您希望的外观的网页是没有问题的，但是，问题是，我们（或我）不知道它应该看什么。我怀疑你想要一个带有红色和蓝色边框的丑陋黄页，是吗？但迄今为止，这是我们从你身上看到的唯一一页。我不知道你想要达到什么样的颜色效果，无论你是使用图像（或者如果你应该使用图像），或者最终页面的外观如何。
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.
I still don't know what you are actually trying to achieve. Going by your fiddle sample, it would have been much easier to just use a solid border around the inner diver to get a red surrounding (instead of another div with background color and padding). But if you just don't want that the text oveflows the div, you have to allow the div to resize:
Update
I think see your problem now. What you are trying to do is not possible the way you are trying to do it. You are falling for a fundamental misconception of the CSS Box Model. The min-height of a box always refers to the height of its parent. If the height of the parent is not set, the height is auto by default, which means the height is calculated by the browser to be as big as necessary for the content of the box to fit. It is also calculated that way if you set a min-height!
Assume you give body a height of 100%, the body is as high as your browser window. If give your outer div a min-height of 100%, it will also be as high as your browser window, but since you set no height (setting min-height does NOT affect the height property!), the height of this box is auto. So in fact, the real height (CSS standard calls this the "tentative height") is only as big as the content of your outer div (not necessarily 100%), yet since min-height says it must be 100% it will render with a height of 100%, regardless what its real height is. If you now set min-height of your inner div to 100%, those 100% mean "100% of the height of my parent box height" and the parent box height is auto, it is NOT 100%! That's why the inner div does not fill the whole screen then.
Of course you can give your outer div a height of 100%, in that case setting the min-height of your inner div to 100% will make it fill the whole screen, but now the outer div is really just 100% in height, it will not expand beyond 100% (it has a FIXED HEIGHT), not even if the inner div is bigger than that, that's why red color will not expand beyond the screen height, even if the yellow color goes beyond the screen height.
Either your outer div has a fixed height, in which case the height will be fixed (that's the whole point of a fixed height, isn't it?) or it has a flexible height, but if it has a flexible height, it will never be "higher" than required for its content (the inner div) and thus using 100% at the inner div, whether you set min-height or height doesn't matter, always refers to 100% of the outer div height and that one will be as big as required for the inner div. I hope you were able to understand what I'm saying here.
You can surely get outer div to behave the way you want (always fill at least 100% of the screen, but expand beyond that if the content requires it) by just setting it's min-height to 100%, since here min-height will refer to the body height and your body has a fixed height, but the inner div will never behave that way. Well, it can behave that way, if your outer div has a fixed width, but then the outer div will not expand, not even if the inner div would require it, instead the inner div will overflow beyond the bounds of the outer one.
I'm pretty sure it is no problem to some create a web page that will look exactly the way you want it to look, but the problem is, we (or I) don't know what it is supposed to look. I doubt you want an ugly yellow page with a red and blue border around it, do you? Yet so far this is the only page we have seen from you. I don't know what kind of color effect you are trying to achieve, whether you are using images (or if you should be using images) or how the page will really look like in the end.
这篇关于如何用最小高度制作可展开的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
