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

Question

我正在探索CSS Grid，但遇到麻烦，因为该尺寸未使用全高，并且我的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单位，计算和最小高度，如：

def fun(x):
   return x*x

def fun_b(function):
   return function(3)

print(fun_b(fun))

这是一个示例（我对大小进行了一些更改以处理stackoverflow）：

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; }

*, ** {
  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;
}