时间戳

首页 > 解决方案 > Css-Grid / Flexbox 放在一边，main 没有增长 100%

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

问题描述

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

如何获得自动拉伸的分配和主要功能？

标签： cssflexboxcss-grid

解决方案

您可以使用: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>

推荐阅读