gpt4 book ai didi

html - 为什么不继承容器高度,当它的大小是最小高度时?

转载 作者:太空狗 更新时间:2023-10-29 15:49:28 25 4
gpt4 key购买 nike

我试图让容器填满整个页面(或视口(viewport),以较大者为准),但遇到了一些麻烦。我正在使用这篇文章中的建议:https://stackoverflow.com/a/17555766 , 设置 <html><body>到 100% 高度。

但我注意到 .Content div 仅在 <body> 时填充视口(viewport)高度设置为 height: 100% , 但不是 min-height: 100% .这是为什么?为什么不 .Content拿起<body>的高度当它设置为 min-height 时?是否有解决此问题的方法(没有绝对定位或固定高度)?

html

<html>
<body>
<div class="Content">Content</div>
</body>
</html>

CSS

* {
margin: 0;
padding: 0;
}

html {
height: 100%;
}

body {
/* does not work for .Content: */
min-height: 100%;
/* does work for .Content: */
/* height: 100%; */
background: blue;
}

.Content {
background: red;
min-height: 100%;
}

代码笔:http://codepen.io/anon/pen/mJEMVX

P.s.: 当 <body>高度设置为 height: 100% , 两者 min-height: 100%height: 100%按预期工作 .Content .

最佳答案

百分比高度是指父元素的计算 height 属性。查看spec .当根据我对链接问题的回答在 body 元素上仅设置 min-height: 100% 时, height 属性保持不变它的默认值为 automin-height 属性不会影响 height 属性的计算值。

因此,您元素上的 min-height: 100% 没有可引用的父级高度,因此它不会起作用。在 body 元素上设置 height: 100% 后,您的元素就可以引用此高度来计算自己的百分比高度。

如何解决这个问题取决于您要实现的布局类型。在 body 元素上设置 min-height: 100% 的唯一目的是允许它在内容高度超过视口(viewport)高度时展开,从而产生滚动条。如果您的内容永远只是视口(viewport)的高度,或者您不希望 body 生成滚动条,那么只需替换 min-height: 100% 即可height: 100%body 上。

关于html - 为什么不继承容器高度,当它的大小是最小高度时?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30297705/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com