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

Question

我正在创建一个 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;
      }

如何让 asign 和 main 自动拉伸？

Answer 1

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

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

您有什么理由不想使用 vh 吗？

Answer 2

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

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


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

但为了让它工作，您可能必须将整个 body 设为 flex-box

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

Answer 3

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

试试下面的代码片段

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

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

Css-Grid / Flexbox aside and main not growing 100%

css

flexbox

css-grid

试试下面的代码片段