css - 如何删除 1440p 显示器上内容下方的白条？

Question

我正在探索 CSS 网格，但遇到了麻烦，因为尺寸没有使用全高，而我的 HTML 和正文是 [width, height 100%]。我有一个很大的白色部分，如何让它吸附到顶部？ 任何建议将不胜感激。 这是我的 CSS。

*,** {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}
html{
    margin: 0;
    padding:0;
    width: 100%;
    height: auto;
}
.grid {
margin: 0;
display: grid;
grid-template-columns: 100%;
grid-template-rows: repeat(auto, 4);
/* grid-template-rows: 13% auto 20%; */
grid-template-areas:
"header" 
"main";

@media screen and (min-width: 500px) {
    grid-template-columns: auto;
    grid-template-rows:   repeat(auto, 3);

    grid-template-areas: 
    "header header"
    "main main"
    "main main";
}

@media screen and (min-width: 800px) {
    grid-template-columns: 30% auto;
    grid-template-rows:   repeat(auto, 3);

    grid-template-areas: 
    "header header"
    "sidebar main"
    "sidebar2 main";
}

一个问题是，如果我弄乱了位置，它会让事情向左飞...

Answer 1

您可以像这样使用 vh 单位、calc 和 min-height:

header { grid-area: header; height: 80px; }
nav    { grid-area: sidebar;  }
main   { grid-area: main; min-height: calc(100vh - 80px); } /* subtract header height */
aside  { grid-area: sidebar2; }

这是一个示例(我稍微更改了大小以在 stackoverflow 上工作):

*, ** {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

.grid {
  margin: 0;
  display: grid;
  min-height: 100vh;
  grid-template-columns: 100%;
  grid-template-rows: repeat(auto, 4);
  /* grid-template-rows: 13% auto 20%; */
  grid-template-areas: "header"  "main";
}
@media screen and (min-width: 200px) {
  .grid {
    grid-template-columns: auto;
    grid-template-rows: repeat(auto, 3);
    grid-template-areas: "header header" "main main" "main main";
  }
}
@media screen and (min-width: 400px) {
  .grid {
    grid-template-columns: 30% auto;
    grid-template-rows: repeat(auto, 3);
    grid-template-areas: "header header" "sidebar main" "sidebar2 main";
  }
}

header {
  background: tomato;
  grid-area: header;
  height: 40px;
}

nav {
  background: gold;
  grid-area: sidebar;
}

main {
  background: olive;
  grid-area: main;
  min-height: calc(100vh - 40px);
}

aside {
  background: orange;
  grid-area: sidebar2;
}

<div class="grid">
  <header>Header</header>
  <nav>Sidebar</nav>
  <main>Main</main>
  <aside>Sidebar 2</aside>
</div>