CSS 网格 : 100% height of top level container doesn't center child elements

Question

我有一个 Angular css-grid SPA，包含 3 个部分，nav、content 和 footer

<div class="body__div--background"  >
  <div class="css-grid-container">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>
</div>

nav 是引导导航。在 css-grid 中，我希望 nav 占用其通常的空间，content 占用大部分剩余空间，而 footer 在底部占用一个小空间

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

app-nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

app-content-component{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

content 可以有不同类型的 Angular 组件。从布局的 Angular 来看，我希望所有这些都在 content 部分居中。我的问题是，如果我说了 2 个组件，比如 home 和 signup(在任何时候只有其中一个在 content 中可见)然后我必须在这两个的 css 中指定 height:100% 。这将成为一个问题，尤其是。随着我的组件列表的增长。

.homepage-component-css-grid-container{
  height: 100%;
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
}

.div__signup{
  height:100%;
  display:flex;
  align-items: center;
  justify-content: center;

}

有没有一种方法可以让我仅在一个地方指定 height:100% 并且 content 中的组件占据整个空间并居中。我试图在 content 中指定 height:100%(并从 home 和 signup 中删除)但我注意到home 和 content 没有正确居中，即没有在 content 区域居中。

见下图

仅内容区域高度:100

<div id="content-div">
  <router-outlet></router-outlet>
</div>

#content-div{
height:100%;
}

我想要的是这个(但为此我必须在我想放置在 content 中的所有组件中明确指定 height:100。我宁愿不要这样做是为了避免代码重复)

Answer 1

如果您只想在 CSS 网格中执行此操作，我会执行以下操作:

1. 为类 .css-grid-container 提供网格属性 grid-template-rows: auto 1fr auto;
2. 将您的 app-content-component 定义为 display: grid;。
3. 现在 app-content-component 中的所有子元素都是网格项并且可以与 justify-self 对齐和 align-self .
4. 在您的情况下，现在是 align-self: center; 和 justify-self: center;。

如果您愿意，您还应该通过这种方式在“内容网格”中获得更大的灵 active 。例如。你现在可以给元素 app-content-component 属性 grid-template-rows: 15fr;

---

看一下:

body {
  padding: 0;
  margin: 0;
}

.css-grid-container {
  height: 100vh;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

app-nav-component {
  grid-column: 1;
  grid-row: 1 / 2;
  
  padding: 10px;
  background: gray;
}

app-content-component {
  grid-column: 1;
  grid-row: 2 / 3;
  display: grid;
}

login {
  align-self: center;
  justify-self: center;

  padding: 10px;
  background: red;
}

app-footer-component{
  grid-column: 1;
  grid-row: 3 / -1;
  
  padding: 10px;
  background: gray;
}

<div class="body__div--background">
  
  <div class="css-grid-container">
    
    <app-nav-component>

      {nav}    
    
    </app-nav-component>
    
    <app-content-component>
      
      <login>{login}</login>
        
    </app-content-component>
    
    <app-footer-component>
    
      {footer}
    
    </app-footer-component>
    
  </div>
  
</div>

---

希望对你有所帮助:)