文章/答案/技术大牛

发布

社区首页 >问答首页 >Css-Grid / Flexbox搁置，main不增长100%

问Css-Grid / Flexbox搁置，main不增长100%
EN

Stack Overflow用户

提问于 2021-08-27 16:04:44

回答 3查看 158关注 0票数 0

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

它有页眉、边栏、主页和页脚。

我只需要asign和主行拉伸，所以它需要整个页面减去页眉和页脚的高度。

我想在不使用"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自动伸展？

css

flexbox

css-grid

回答 3

Stack Overflow用户

回答已采纳

发布于 2021-08-27 16:57:19

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

票数 1

Stack Overflow用户

发布于 2021-08-27 16:14:00

为了使其具有正确的浏览器高度，视图高度(vh)属性是必需的。

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

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

票数 1

Stack Overflow用户

发布于 2021-08-27 16:22:36

严格使用flex-box的一种方法是将aside和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;
}

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68956425

复制

相似问题

问Css-Grid / Flexbox搁置，main不增长100%
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Css-Grid / Flexbox搁置，main不增长100%EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Css-Grid / Flexbox搁置，main不增长100%
EN