空时CSS网格布局行高0px

阿尔文·斯特凡努斯

我有一个html：

<div id="container">
    <div id="child1"></div>
    <div id="child2">
        <div id="fullpage"></div>
    </div>
    <div id="child3"></div>
</div>

和CSS：

#container {
    display:grid;
    grid-template-rows: minmax(0, auto) auto minmax(0,75px);
}

空的child1高度将填充顶部屏幕和屏幕之间的间隙child2。我以为minmax(0, auto)会把孩子1推0px高吗？

我想要的是当孩子为空或其中的元素被隐藏时，高度应为0。

我该如何实现？

已编辑

#container-wrapper {
  display:grid;
  grid-template-rows: auto minmax(0,75px);
  height:100vh;
}

<div id="container-wrapper">
        <div id="pageContainer" style="background-color:red">
          <div>test</div>
        </div>
        <div id="tab-navigation" style="background-color:green">
          <!-- This should be 0px -->
        </div>
    </div>

第二个孩子的身高应为0px。但这是错误的。

陪同Afif

如下所示：

#container {
  display: grid;
  height:200px;
  margin:10px;
  border:1px solid red;
  grid-template-rows: auto 1fr auto;
}

#container  > * {
  border:1px solid;
}
#child3 {
  max-height:75px;
}

#fullpage {
  height:100%;
  background:green;
}

<div id="container">
  <div id="child1"></div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"></div>
</div>

<div id="container">
  <div id="child1"> some content <br> here</div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"></div>
</div>

<div id="container">
  <div id="child1"> some content <br> here</div>
  <div id="child2">
    <div id="fullpage"></div>
  </div>
  <div id="child3"> and also here </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。