0
我有一個網頁，我正試圖做兩件事：在「桌面」視圖中，我希望標題在側面和「移動」視圖我想頭部位於頂部。我還希望頭部固定（或粘滯）到位，並且我希望頭部或側面的標題周圍沒有「空白」。我的問題是，如果我的位置粘滯，我無法弄清楚如何讓頁眉佔據頁面的全部寬度（位於頂部時）或在桌面視圖中以全高度上下排列。但是，當我將位置更改爲固定而非粘性時，標題涵蓋了大部分文章，而在移動視圖中，並且當我應用邊距頂部值時，它對該特定視口起作用（看起來不錯），但對瀏覽器進行任何調整窗口邊界太多或太少。
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網格和一些固定解決方案的解決方案！謝謝 –