CSS GRID我如何在标题和网格容器之间放置一些空间与高度:100%?

Question

我到处都看了堆栈溢出，没有一个问题直接回答这个问题，所以我想知道你们是否有解决这个问题的办法，或者我只是做了一些绝对错误的事情?

* {
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

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

1. remove position: fixed
2. 设置容器本身的margin/padding top

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

Answer 2

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

Answer 3

我认为最简单的解决方案是放置一个块占位符来占用您的标题空间，因为它是position: fixed，您的原始标题不会占用任何空间。

* {
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>