html – 当用最小高度调整大小时,为什么不继承容器高度？_html-js-css

概述我正在尝试使容器填满整个页面(或视口,以较大者为准),但遇到了一些麻烦.我正在使用这篇文章中的建议： https://stackoverflow.com/a/17555766,设置< html>和< body>到100％的高度. 但我注意到.Content div仅在< body>时填充视口.高度设置为高度：100％,但不是最小高度：100％.这是为什么？为什么不.Content获取< body> 我正在尝试使容器填满整个页面(或视口,以较大者为准),但遇到了一些麻烦.我正在使用这篇文章中的建议： https://stackoverflow.com/a/17555766,设置< HTML>和< body>到100％的高度.

但我注意到.Content div仅在< body>时填充视口.高度设置为高度：100％,但不是最小高度：100％.这是为什么？为什么不.Content获取< body>的高度什么时候设置最小高度？有没有解决这个问题(没有绝对定位或固定高度)？

HTML

<HTML>  <body>  <div >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%;}

codepen：http://codepen.io/anon/pen/mJEMVX

P.s.：当< body>高度设置为高度：100％,最小高度：100％和高度：100％按预期工作.Content.

解决方法百分比高度是指父元素的计算高度属性.请参阅 spec.根据我对链接问题的回答,在body元素上仅设置min-height：100％时,height属性保持不变,其默认值为auto. min-height属性不会影响height属性的计算值.

因此,元素的最小高度：100％没有要引用的父高度,因此它不起作用.在body元素上设置height：100％后,元素可以引用此高度进行自己的百分比高度计算.

如何解决这个问题取决于您尝试实现的布局类型.在body元素上设置min-height：100％的唯一目的是允许它在内容高度超过视口的高度时展开,从而产生滚动条.如果您的内容只是视口的高度,或者您不希望body生成滚动条,那么就像更换min-height一样简单：100％高度：100％在身体上.

总结

以上是内存溢出为你收集整理的html – 当用最小高度调整大小时,为什么不继承容器高度？全部内容，希望文章能够帮你解决html – 当用最小高度调整大小时,为什么不继承容器高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1079568.html

html – 当用最小高度调整大小时,为什么不继承容器高度？

发表评论

评论列表（0条）