我有一个我想做两件事的网页：在"桌面"视图中，我希望标头站在侧面，在"移动"视图中，我希望标头符合标题处于顶部。我还希望将标头固定在适当的位置（或粘性），我希望在顶部或侧面的标头周围没有"空白空间"。我的问题是，如果我的位置很粘，我将无法弄清楚如何使标头占据页面的完整宽度（在顶部时）或在桌面视图中以全高度上下倾斜。但是，当我将位置更改为固定而不是粘性时，标题在移动视图中覆盖了大部分文章，当我应用保证金顶值时，它对该特定的视口有效（看起来不错），但是浏览器的任何大小都有大小窗户的边距太多或太少。
tl; dr-
我如何将标头固定在顶部（和侧面）而不覆盖内容的同时，同时让标头还没有空间周围的空间？
@import url('https://fonts.googleapis.com/css?family=Lora');
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: 400px;
}
html {
height: 100%;
}
body {
font-size: 1.2em;
margin: 0;
padding: 0;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
background-color: #FAEBD7;
}
body > div {
padding: .4em;
}
header {
position: sticky;
background-color: #6495ED;
padding: 2.5%;
top: 0;
left: 0;
right: 0;
width: 100%;
}
a {
text-decoration: none;
color: #FAEBD7;
}
a:visited {
color: #FAEBD7;
}
nav {
text-align: right;
}
nav li {
list-style: none;
}
nav a {
color: #FAEBD7;
text-decoration: none;
}
nav a:visited {
color: #FAEBD7;
}
nav a:active {
color: #DEB887;
}
nav a:hover {
color: white;
text-decoration: underline;
}
main {
display: flex;
flex-direction: column;
}
article {
background-color: white;
box-shadow: 10px 10px 10px 5px #888888;
margin: 2.5%;
padding: 1%;
}
article figure {
display: flex;
justify-content: center;
padding: 10%;
}
article a {
color: #6495ED;
}
article a:visited {
color: #6495ED;
}
article a:active {
color: #DEB887;
}
article a:hover {
color: black;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Lora', serif;
}
.post-date {
color: grey;
}
@media screen and (min-width: 880px) {
body > div {
width: 100%;
max-width: 75em;
margin: 0 auto;
}
article {
width: 55%;
}
main {
align-items: flex-end;
}
}
@media screen and (max-width: 500px) {
img {
height: 200px;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kids Read for Fun | Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<header>
<h1><a href="#">Kids Read for Fun</a></h1>
<hr>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Current Reviews</a></li>
<li><a href="#">Archive</a></li>
</ul>
</nav>
</header>
<main>
<article>
<div class="post-date">January 6, 2016</div>
<section class="post-content">
<h2><a href="#">Septimus Heap Book One: Magyk</a></h2>
<figure>
<img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSefEemDZe2rlGwqBTPEtZHr1pn54ve_q0eumcdUWQXvsEHd-D9" alt="Book cover for Septimus Heap 1">
</figure>
<p>If you enjoy stories about seventh sons of seventh sons and magyk this is the book for you. <a href="#">Read More...</a></p>
</section>
</article>
<article>
<div class="post-date">Dec 20, 2015</div>
<section class="post-content">
<h2><a href="#">Magnus Chase Book One: Sword of Summer</a></h2>
<figure>
<img src="https://books.google.com/books/content/images/frontcover/xWuyBAAAQBAJ?fife=w300" alt="Book cover for Magnus Chase 1">
</figure>
<p>The anticipated new novel by Rick Riordan. After Greek mythology (Percy Jackson), Greek/Roman (Heroes of Olympus), and Egyptian (Kane Chronicles), Rick decides to try his hand with Norse Mythology, and the end result is good. <a href="#">Read More...</a></p>
</section>
</article>
</main>
</div>
</body>
</html>我将使用CSS网格和媒体查询。所有问题都可以通过网格区域解决。