CSS GRID 我如何在 header 和带有 height:100% 的网格容器之间放置一些 space？

Question

我到处都查看了堆栈溢出问题，none 的问题直接回答了这个问题，所以我想知道你们中是否有人对此有解决方案，或者我只是做了一些绝对错误的事情？

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

html,
body {
  height: 100%;
  margin: 0;
}

.header {
  width: 100%;
  position: fixed;
  height: 10%;
  background-color: red;
}

.container {
  height: 100%vh;
  display: grid;
  grid-template-areas: "side1 middle side2" "footer footer footer";
  grid-template-rows: 80% 20%;
  grid-template-columns: 15% 70% 15%;
}

.side1 {
  grid-area: side1;
}

.middle {
  grid-area: middle;
  overflow: auto;
}

.side2 {
  grid-area: side2;
}

.footer {
  grid-area: footer;
}

<div class="header">header</div>
<div class="container">
  <div class="side1">side 1</div>
  <div class="middle">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure architecto dolore libero dignissimos perspiciatis aliquam cumque corporis? Aperiam in tempore fugiat eveniet! Quaerat fuga molestias tenetur voluptatum, eligendi, est laboriosam quis illo
    hic nobis eos aspernatur non! Tempore minus dolorem placeat, architecto ea magnam pariatur officia nobis, dicta quas exercitationem ducimus laudantium illum minima, alias quod consequatur nihil laborum?</div>
  <div class="side2">side2</div>
  <div class="footer">footer</div>
</div>

将 margin-bottom 添加到 .header 似乎不起作用！

Answer 1

删除 position:fixed; 并在 .header class 中添加 display:block;。然后添加margin-bottom: YOURSIZE;

Answer 2

因为你有 header 和 position: fixed 你需要定位它 top: 0 ，然后你可以在 container 上应用 margin-top:

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

html, body {
    height:100%;
    margin:0;
}

.header{
    width:100%;
    position:fixed;
    height:10%;
    background-color:red;
    top: 0;
}
.container {
    margin-top: 50px;
    height: 100vh;
    display: grid;
    grid-template-areas:
        "side1 middle side2"
        "footer footer footer";
    grid-template-rows: 80% 20%;
    grid-template-columns: 15% 70% 15%;
}

.side1 {
    grid-area:side1;
}
.middle {
    grid-area:middle;
    overflow: auto;
}
.side2{
grid-area:side2;
}
.footer{
grid-area:footer;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="side1">side 1</div>
        <div class="middle">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure architecto dolore libero dignissimos perspiciatis aliquam cumque corporis? Aperiam in tempore fugiat eveniet! Quaerat fuga molestias tenetur voluptatum, eligendi, est laboriosam quis illo hic nobis eos aspernatur non! Tempore minus dolorem placeat, architecto ea magnam pariatur officia nobis, dicta quas exercitationem ducimus laudantium illum minima, alias quod consequatur nihil laborum?</div>
        <div class="side2">side2</div>
        <div class="footer">footer</div>
    </div>

</body>

</html>

Answer 3

我认为最简单的解决方案是为你的 header 放置一个块占位符来占据 space，因为它是 position: fixed，你原来的 header 不会'不占用任何 space.

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

html,
body {
  height: 100%;
  margin: 0;
}

.header {
  width: 100%;
  position: fixed;
  height: 10%;
  background-color: red;
}
.placeholder {
  width: 100%;
  height: 10%;
}

.container {
  height: 100%vh;
  display: grid;
  grid-template-areas: "side1 middle side2" "footer footer footer";
  grid-template-rows: 80% 20%;
  grid-template-columns: 15% 70% 15%;
}

.side1 {
  grid-area: side1;
}

.middle {
  grid-area: middle;
  overflow: auto;
}

.side2 {
  grid-area: side2;
}

.footer {
  grid-area: footer;
}

<div class="header">header</div>
<div class="placeholder"><!--This is a placeholder--></div>
<div class="container">
  <div class="side1">side 1</div>
  <div class="middle">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure architecto dolore libero dignissimos perspiciatis aliquam cumque corporis? Aperiam in tempore fugiat eveniet! Quaerat fuga molestias tenetur voluptatum, eligendi, est laboriosam quis illo
    hic nobis eos aspernatur non! Tempore minus dolorem placeat, architecto ea magnam pariatur officia nobis, dicta quas exercitationem ducimus laudantium illum minima, alias quod consequatur nihil laborum?</div>
  <div class="side2">side2</div>
  <div class="footer">footer</div>
</div>

Answer 4

您在 height: 100%vh 中有错字，应该是 height: 100vh。如果将页眉设置为 fixed，那么边距也不会按照您想要的方式工作，因此您有 2 个选项：

删除位置：固定
将 margin/padding top 设置为容器本身

你可以在这里查看https://codesandbox.io/s/crazy-haze-un2xd?file=/src/styles.css

CSS GRID 我如何在 header 和带有 height:100% 的网格容器之间放置一些 space？

CSS GRID how would I put some space between header and grid container with height:100%?

css

css-grid