网格布局 - 分配侧边栏和主要内容与页眉和页脚的全高休息？ [复制]答案

【问题标题】：Grid layout - assigning side bar and main conent with full height rest from header and footer? [duplicate]网格布局 - 分配侧边栏和主要内容与页眉和页脚的全高休息？ [复制]
【发布时间】：2020-10-21 16:58:35
【问题描述】：

我正在尝试制作一个布局，它应该占据页眉和页脚的高度，其余部分留给主容器。（侧边栏，内容）。但无法存档。有人帮帮我吗？

我没有固定页眉和页脚的高度。（它应该只占据内容高度）

.container {
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: 100px auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  height: 100vh;
}

.header { grid-area: header; background-color: yellow; }
.sidebar { grid-area: sidebar; background-color: gray; }
.footer { grid-area: footer; background-color: green;}
.content { grid-area: content; }

 <div class="container">
  <div class="header">header should shrink with it's content</div>
  <div class="sidebar">it should be rest of the height from header and footer</div>
  <div class="footer">footer should shrink with it's content</div>
  <div class="content">
    <p>it should be rest of the height from header and footer</p>
 </div>
</div>
</div>

【问题讨论】：

Demo

标签： html css css-grid

【解决方案1】：

grid-template-rows: auto 1fr auto;

1fr 将填充其余空间。

html, body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100px auto;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
  height: 100vh;
}

.header { grid-area: header; background-color: yellow; }
.sidebar { grid-area: sidebar; background-color: gray; }
.footer { grid-area: footer; background-color: green;}
.content { grid-area: content; }

<div class="container">
  <div class="header">header should shrink with it's content</div>
  <div class="sidebar">it should be rest of the height from header and footer</div>
  <div class="footer">footer should shrink with it's content</div>
  <div class="content">
    <p>it should be rest of the height from header and footer</p>
 </div>
</div>
</div>

【讨论】：