Question

我有一个有角度的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组件。从布局角度来看，我希望所有这些都集中在content部分的中心。我的问题是，如果我说了2个组件，请说home和signup（在content内只能看到其中一个组件），那么我必须指定height:100%在这两个css中。这将成为一个特别的问题。随着我的组件列表的增长。

.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内的组件占用整个空间并居中。我尝试在height:100%中指定content（并从home和signup中删除），但我注意到home和content没有＆＃39} ; t正确居中，即不在content区域内居中。

见下面的图片

身高：仅限于内容区域

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

#content-div{
height:100%;
}

我想要的是这个（但为此我必须在height:100内的所有组件中明确指定content。我宁愿不这样做以避免代码重复）< / p>

Answer 1

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

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

如果您愿意，您还应该在内容网格中拥有更大的灵活性＆＃34;用这种方式。例如。您现在可以为元素app-content-component提供属性grid-template-rows: 15fr;

在这里看一下：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

我希望这有助于：）

Answer 2

建议不要这样使用...但是如果你在content-div中放置的元素不多，你可以使用它：

#content-div > * {
height: 100%;
}

这应该照顾content-div中的所有孩子。

CSS网格：顶级容器的100％高度不会使子元素

2 个答案: