最大高度在CSS网格元素中不起作用的问题

最大高度在CSS网格元素中不起作用的问题

本文介绍了最大高度在CSS网格元素中不起作用的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

编辑:正如@Onkar-ruikar下面解释的那样,我对我的问题有相当大的误解。我仍然不知道如何以一种对我真正有效的方式处理循环依赖的后果,但我必须在这里完全重写我的问题,所以我将这两个问题作为单独的问题处理,将这个标记为已解决并询问后续问题:Dealing with cyclic dependencies of percentage sized boxes css (specifically how to get a max-height)

我遇到了一个问题,即最大高度在网格元素中不能正常工作。基本上我有一个大小灵活的网格元素,在它里面我显示了一个IFRAME。我想要将iframe缩放到其完整的大小,并有一个周围的div适合iframe的大小,与网格元素的最大大小相等,并从那里滚动。我的问题是,这个最大高度不知何故不能正常工作。我为此准备了jsfiddle

对于此代码,我在#grid1:

中使用";Height:100%;";或";max-Height:100%";得到不同的结果数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
#grid0 {
  display: grid;
  grid-template-rows: 50px;
  grid-template-columns: 200px;
  height: 500px;
}

#grid1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}
<div id='grid0'>
  <div id='grid1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

将此结果与#grid1的css中的";Height:100%;";-行中的注释进行比较。有趣的是,当用Firefox检查#Grid1时,它的高度显示为与max-宽度相等,但显然它不是以这种方式呈现的。

我尝试在#out周围引入另一个容器,将其高度设置为自动,最大高度设置为100%,并将#grid1的高度设置为100%修复,因为我认为它可能是";fit-content";,但也不起作用...

有没有人建议如何解决这个问题,或者我做错了什么?

我对每一个提示都很满意!

推荐答案

我认为这个问题实际上与网格无关。我也可以使用普通块元素重现它。

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  height: fit-content;
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height
  height: 100%;
  */
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}
<div id='div0'>
  <div id='div1'>
    <div id='out'>
      <div id='large'>
      </div>
    </div>
  </div>
</div>

我的解释基于以下规格:

这是使用最小内容、最大内容和适合内容的值。


在您的示例中,#grid1(蓝色)工作正常,因为max-height: 100%它获得了50px的高度。height:fit-content没有影响,如果有影响,蓝色将是100px高。

问题是#Out(紫色)太多了。这是因为蓝色容器说我的身高取决于我的孩子(因为适合度)。当您设置height:100%时,您会说它的高度取决于容器#grid0,而不是#out(紫色)。当#grid1(蓝色)和#out(紫色)紫色都表示它们相互依赖时,则会创建循环依赖。

这意味着紫色的百分比高度将被视为自动。因此,它依赖于身高较大的儿童。因为大的有100px的高度,紫色也有100px的高度。


您说您在#out周围又添加了一个容器:

数据-lang="js"数据-隐藏="真"数据-控制台="真"数据-巴贝尔="假">
#div0 {
  width: 200px;
  height: 50px;
}

#div1 {
  max-height: 100%;
  background: blue;
  /* it works using height instead of max-height*/
  height: 100%;
}

#div2 {
  height: auto;
  /* uncomment following to get desired result */
  /* height: inherit;*/
  max-height: 100%;
}

#out {
  height: auto;
  max-height: 100%;
  overflow: hidden;
  background: purple;
  width: 150px;
}

#large {
  height: 100px;
  width: 100px;
  background: red;
}
<div id='div0'>
  <div id='div1'>
    <div id="div2">
      <div id='out'>
        <div id='large'>
        </div>
      </div>
    </div>
  </div>
</div>

在此代码中,如果您使用inherit而不是auto,则可以修复该问题。Inherit使其依赖于父项,并使其依赖于子项。

这篇关于最大高度在CSS网格元素中不起作用的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-20 16:51