HTML – 为什么高度= 100％不起作用？

概述我使用占用所有可用空间的第三方组件,即width = 100％和height = 100％.我无法控制它. 我试图在以下布局中使用它,但它的高度= 100％不起作用(我希望第三方组件占用所有绿色空间). 为什么？你会如何解决这个问题？ .container { display: flex; flex-direction: column; width: 200px; height: 我使用占用所有可用空间的第三方组件,即wIDth = 100％和height = 100％.我无法控制它.

我试图在以下布局中使用它,但它的高度= 100％不起作用(我希望第三方组件占用所有绿色空间).

为什么？你会如何解决这个问题？

.container {  display: flex;  flex-direction: column;  wIDth: 200px;  height: 100px;}.header {  display: flex;  background-color: rgba(255,0.5);}.content {  flex-grow: 1;  background-color: rgba(0,255,0.5);}.third-party-component {  height: 100%;  wIDth: 100%;  background-color: rgba(0,0.5);}

<div >  <div >header</div>  <div >    <div >      Third party component    </div>  </div></div>

解决方法 通常,对于使用高度百分比来获取其父级高度的元素,父级需要 height other than auto or being positioned absolute,否则高度将计算为auto.

根据这两个选项,正如您在评论中提到的那样,您自己的标题在高度上是动态的,您将保留绝对定位.

添加绝对内容的问题,它将被取出流程并停止表现为正常流动的flex项目,好消息,可以添加包装设置为绝对.

堆栈代码段

.container {  display: flex;  flex-direction: column;  wIDth: 200px;  height: 100px;}.header {  display: flex;  background-color: rgba(255,0.5);}.content {  position: relative;                               /*  added  */  flex-grow: 1;  background-color: rgba(0,0.5);}.wrapper {  position: absolute;                               /*  added  */  left: 0;                                          /*  added  */  top: 0;                                           /*  added  */  right: 0;                                         /*  added  */  bottom: 0;                                        /*  added  */}.third-party-component {  height: 100%;  wIDth: 100%;  background-color: rgba(0,0.5);}

<div >  <div >header</div>  <div >    <div >      <div >       Third party component      </div>    </div>  </div></div>

另一种选择可能是更新FlexBox属性,使用flex：1 1 100％给出内容高度,并给出标题flex-shrink：0;所以它不缩小(内容得到100％).

这可能不适用于Safari,因为我知道它没有设置高度属性时出现问题,但现在无法测试,因为我无法访问Safari.

.container {  display: flex;  flex-direction: column;  wIDth: 200px;  height: 100px;}.header {  display: flex;  flex-shrink: 0;  background-color: rgba(255,0.5);}.content {  flex: 1 1 100%;  background-color: rgba(0,0.5);}

<div >  <div >header</div>  <div >    <div >      Third party component    </div>  </div></div>

总结

以上是内存溢出为你收集整理的HTML – 为什么高度= 100％不起作用？全部内容，希望文章能够帮你解决HTML – 为什么高度= 100％不起作用？所遇到的程序开发问题。

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