嵌套的CSS网格隐式填充父网格的剩余高度

时间：2018-01-11 16:05:45

标签： css css-grid

我正在尝试让子网格符合父网格的尺寸。我怎么能够实现这一目标？

我最初写的是这样的：

＆＃13;
＆＃13; 
.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: #0D47A1;
  grid-area: nav;
}

.child {
  grid-area: child;
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
＆＃13; 
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我想要有＆＃39;内容＆＃39;是一个可滚动的区域，不会扩展父级的高度（所以它应该是＆＃39; 270px＆＃39;）。

3 个答案:

答案 0 :(得分：6)

这是一个快速而简单的解决方案，不会对您的HTML进行任何更改。只需将其添加到您的代码中：

.child { 
   overflow: auto;
}

这会覆盖网格项的min-height: auto默认设置，允许它们缩小到低于其内容的大小并创建溢出条件。

此处有完整说明：Prevent content from expanding grid items

＆＃13;
＆＃13; 
.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
  overflow: auto;   /* NEW */
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
＆＃13; 
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

或者，而不是你在这里：

.parent-grid {
  display: grid;
  height: 300px;
  grid-template-rows: 30px 1fr;
}

试试这个：

.parent-grid {
  display: grid;
  grid-template-rows: 30px 270px;
}

.content {
  overflow: auto;
  height: 100%;
}

我还删除了一个看似不必要的额外容器（.child-grid）。

＆＃13;
＆＃13; 
.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 270px;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
}

.content {
  background-color: red;
  overflow: auto;
  height: 100%;
}

* {
  box-sizing: border-box;
}
＆＃13; 
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="content">
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：5)

网格项（.child）默认为min-height: auto。将min-height: 0应用于.child以取消此操作。

然后将height: 100%添加到.child-grid，将overflow: auto添加到content ...

＆＃13;
＆＃13; 
.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 10vh 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: #0D47A1;
  grid-area: nav;
}

.child {
  grid-area: child;
  min-height: 0;
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
  height: 100%;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
＆＃13; 
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

好吧，为您的孩子网格提供专用高度： 

overflow: auto;

并设置 

display: block;

确实，确保了身高。如有必要，将出现滚动条。 不确定，如果css网格的最新功能真的是在这里使用的最好的东西。您可能需要查看flexbox：https://codepen.io/fnocke/details/RxMKOK

或者 - 甚至更兼容 - 你确实可以坚持正常的// Subscribe on ComboBoxItem-s events. comboBox.Items.Cast<ComboBoxItem>().ToList().ForEach(i => i.PreviewMouseDown += ComboBoxItem_PreviewMouseDown); private void ComboBoxItem_PreviewMouseDown(object sender, MouseButtonEventArgs e) { // your handler logic... } 。只要你指定高度并设置溢出，那也应该这样做。

相关问题
最新问题