Css-Grid / Flexbox 放在一边，main 没有增长 100%答案

【问题标题】：Css-Grid / Flexbox aside and main not growing 100%Css-Grid / Flexbox 放在一边，main 没有增长 100%
【发布时间】：2021-08-27 16:04:44
【问题描述】：

我正在创建一个 css-grid / flexbox 模板，一切正常。

它有页眉、旁边、主要和页脚。

我只需要将分配和主行拉伸，因此它需要整个页面减去页眉和页脚高度。

我想这样做而不必使用“vh”

这里是完整的当前代码：

* {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 30% auto;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "header header"
                             "sidebar main"
                             "footer footer"
      }

      header,
      aside,
      main,
      footer {
        padding: 16px;
        text-align: center;
      }

      header {
        background: purple;
        grid-area: header;
      }

      aside {
        background: blue;
        grid-area: sidebar;
      }

      main {
        background: green;
        grid-area: main;
      }

      footer {
        background: orange;
        grid-area: footer;
      }

我怎样才能得到自动拉伸的分配和主要？

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

您可以使用:root{} 和calc() 与变量来计算高度。很抱歉重新编码您的尝试，但我认为最好从零开始向您展示一种新方法。

试试下面的sn-p

* {box-sizing: border-box;padding: 0;margin: 0}
      
:root{
  --nav-height: 80px;
  --footer-height: 80px;
}
.grid-container{
  display: grid;
  grid-template-columns: 30% 70%;
  height:calc(100vh - var(--nav-height) - var(--footer-height));
 }
.grid-item{
  border:1px solid black;
  padding:10px;
}
.nav{
  width:100%;
  height:var(--nav-height);
  border:1px solid black;
  padding:10px;
}
footer{
  width:100%;
  height:var(--footer-height);
  border:1px solid black;
  padding:10px;
}

<body>
  
  <div class="nav">nav content</div>
  
  <div class="grid-container">
    <div class="grid-item">body content one</div>
    <div class="grid-item">body content two</div>
  </div>
  
  <footer>footer content</footer>
 
 </body>

【讨论】：

【解决方案2】：

为了使其成为正确的浏览器高度，需要视图高度 (vh) 属性。

您也可以使用固定的像素高度，或使其相对于特定宽高比的宽度，但这些都不会响应 100% 的浏览器高度。

你有什么不想使用 vh 的原因吗？

【讨论】：

基本上，100% 会自动增长，但如果我想把它放在一边并主要拉伸它，我将不得不手动计算 vh 减去页眉和页脚高度，所以我不能只做 height: 100vh 。 ..它可能是 90vh 或其他的东西..每次页眉和页脚增长时我都必须更改 vh，除非我想要在正文上添加滚动条
我认为解决这个问题的最简单的方法是为你的页眉和页脚设置一个指定的高度，比如 50px，然后使用 height: calc(100vh - 100px); 作为主 div 和备用 div，然后它会填充浏览器屏幕。

【解决方案3】：

严格使用 flex-box 的一种方法是将 side 和 main 包装在一个 div 中，并将 div 的 flex 属性设置为 1

<div class="container">
  <aside>aside</aside>
  <main>main</main>
</div>


.container {
  display: flex;
  flex: 1;
}

但为了让它工作，你可能不得不把整个身体做成一个弹性盒子

body {
  display: flex;
  flex-direction: column;
}

【讨论】：

如果可能的话，我想主要使用 css-grid。