Question

我有一个 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。但这是错误的。

Answer 1

像下面那样做：

#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>

CSS 网格布局行高 0px 空时

已编辑

1 个答案: