如何在CSS网格中垂直使用所有可用空间? [英] How to use all available space vertically in a CSS Grid?

问题描述

我正在尝试构建一个Web布局，在中间具有标题栏，导航标题，页脚和主要内容区域(将边栏和主视图一分为二).

我打算为其使用CSS网格布局.我当前的代码可以管理所有内容，但以下各项除外:主要内容(和侧边栏)会根据其内容进行调整.那不是我想要的.

如何使第三栅格行填充所有剩余的垂直空间?

 * {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
} 

 <div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div> 

解决方案

解决方案

将网格高度设置为视口高度-将height: 100vh添加到.grid并将默认浏览器body边距重置为零.

---

为什么

这是因为除非容器(您已为其指定了display: grid)具有一组height，否则它仅占用 的空间作为其内容. 因此，当您指定高度时，现在有可用空间可以填充.参见下面的演示:

 * {
  box-sizing: border-box;
}
body { /* ADDED */
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
  height: 100vh; /* ADDED */
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
} 

 <div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div> 

I'm trying to build a web layout with a title bar, a nav header, a footer and a main content area in the middle (split in two for a sidebar and main view).

I intend to use CSS Grid layout for it. My current code manages it all, except: The main content (and sidebar) adjust to its content. And that's not what I want.

How can I make that 3rd grid row fill all remaining vertical space?

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
}

<div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div>

解决方案

Solution

Set grid height to the viewport height - add height: 100vh to the .grid and reset the default browser body margin to zero.

---

Why

This is because unless the container (for which you have given display: grid) has a set height, it will take only as much space as its contents. So when you give height there is available space now to fill into. See demo below:

* {
  box-sizing: border-box;
}
body { /* ADDED */
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: min-content min-content auto min-content;
  grid-gap: 10px;
  grid-template-areas: "header header" "nav nav" "sidebar main" "footer footer";
  height: 100vh; /* ADDED */
}

.title {
  grid-area: header;
  background-color: #1BC336;
}

.navigation {
  grid-area: nav;
  background-color: #C3A21B;
}

.sidebar {
  grid-area: sidebar;
  background-color: gold;
  overflow: auto;
}

.main {
  grid-area: main;
  background-color: #1BC3B9;
  overflow: auto;
}

.footer {
  grid-area: footer;
  background-color: #5C1BC3;
}

<div class="grid">
  <div class="title">
    <h3>Title Bar</h1>
  </div>
  <div class="navigation">Navbar</div>
  <div class="sidebar">Sidebar:<br>Info-type stuff about what's currently being shown in main</div>
  <div class="footer">Footer</div>
  <div class="main">
    <h1>Main content</h2><br>Should occupy all the remaining space. <br>Test<br>Test<br>Test<br>Test<br>Test</div>
</div>

这篇关于如何在CSS网格中垂直使用所有可用空间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！