Question

我有两个页面使用相同的CSS文件。本质上，我希望页眉停留在页面顶部，没有空白。它适用于我的索引页面，但不适用于下一页。更令人困惑的是，它可以在Codepen中工作，但不能在我的Visual Studio中工作。我检查了指向两个页面的CSS链接，都可以正常工作，其余CSS可以在两个页面上正常工作。只有其中一个页眉上方的页边空白不起作用。检查元素显示所有边距应为零。 Incorrect (see black line at top?) Correct (see no line?) 正确页面的HTML：

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css">
    <title>Cauldron Luxury Bath</title>
</head>
<body>
    <div class="sticky-menu">
        <header class="header">
            <h1 id="sticky-h1">
                <a href="index.html">
                    <img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
                </a>
            </h1>
        </header>
        <nav class="nav">
            <ul id="banner">
                <li class="btn"><a href="#">Products</a></li>
                <li class="btn"><a href="#">News</a></li>
                <li class="btn"><a href="#">FAQ</a></li>
                <li class="btn"><a href="#">About</a></li>
                <li class="btn"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div id="index-container">

错误页面的HTML：

<head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css">
    <title>Cauldron Privacy Policy</title>
</head>
<body>
    <div class="sticky-menu">
       <header class="header">
            <h1 id="sticky-h1">
                <a href="index.html">
                    <img class="headlogo" src="WebsiteLogo2.jpg" alt="Cauldron Logo" />
                </a>
            </h1>
        </header>
        <nav class="nav">
            <ul id="banner">
                <li class="btn"><a href="#">Products</a></li>
                <li class="btn"><a href="#">News</a></li>  
                <li class="btn"><a href="#">FAQ</a></li>
                <li class="btn"><a href="#">About</a></li>
                <li class="btn"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
  </body>
</html>

双方共享的CSS：

body {
    background: black;
    font-family: 'Playfair Display', serif;
    margin: 0;
    padding: 0;
}
.header {
    grid-area: a;
    margin-top:0;
}
.sticky-menu {
    position: fixed;
    width: 100%;
    margin: 0 auto 0 auto;
}
#sticky-h1 {
    margin: 0 auto 0 auto;
    background: white;
    padding-left: 40px;
    padding-top: 20px;
    width: 100%;
}
.headlogo {
    width: 300px;
}
.nav {
    grid-area: b;
}
#banner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: darkgrey;
    width: 100%;
    position: fixed;
    top: 0;
    margin-top: 60px;
}
a {
    color: white;
    text-decoration: none;
}
a:hover {
    color: dimgray;
}
.btn {
    color: #FFF;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    display: inline-block;
    width: 200px;
}
#privacy-container {
    color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
 }
#privacy-header{
    color:black;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 50px;
    background-color: white;
}

Answer 1

我可以看到＃sticky-h1有一个“ padding-top：20px”。您可能需要删除该填充以使其堆叠到顶部。我还认为您只需要“保证金：0自动；”即可。一次。

请检查以下示例：（我使用了SO标志，因为我没有您的标志）

body, html {
    background: black;
    font-family: 'Playfair Display', serif;
    margin: 0;
    padding: 0;
}
.header {
    grid-area: a;
    margin-top:0;
}
.sticky-menu {
    position: fixed;
    width: 100%;
    margin: 0 auto;
}
#sticky-h1 {
    margin: 0 auto;
    background: white;
    padding-left: 40px;
    padding-top: 20px;
    width: 100%;
}
.headlogo {
    width: 300px;
}
.nav {
    grid-area: b;
}
#banner {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background: darkgrey;
    width: 100%;
    position: fixed;
    top: 0;
    margin-top: 100px;
}
a {
    color: white;
    text-decoration: none;
}
a:hover {
    color: dimgray;
}
.btn {
    color: #FFF;
    font-size: 30px;
    font-weight: 300;
    text-transform: uppercase;
    display: inline-block;
    width: 200px;
}
#privacy-container {
    color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
 }
#privacy-header{
    color:black;
    padding-bottom: 10px;
    padding-left: 10px;
    font-size: 50px;
    background-color: white;
}

<body>	
    <head>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="StyleSheet1.css">
    <title>Cauldron Privacy Policy</title>
</head>
<body>
    <div class="sticky-menu">
       <header class="header">
            <h1 id="sticky-h1">
                <a href="index.html">
                    <img class="headlogo" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a" alt="Cauldron Logo" />
                </a>
            </h1>
        </header>
        <nav class="nav">
            <ul id="banner">
                <li class="btn"><a href="#">Products</a></li>
                <li class="btn"><a href="#">News</a></li>  
                <li class="btn"><a href="#">FAQ</a></li>
                <li class="btn"><a href="#">About</a></li>
                <li class="btn"><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
  </body>

在您发表评论之后，我将“ padding-top：20px”放回去，并将“ #banner”的边距增加到100px。

Answer 2

因此，实际上我在粘滞菜单下为HTML添加了一个中断，它解决了此问题。不知道这是否是正确的方法...但是由于它起作用了，也许我不会太担心...

CSS适用于一页而不适用于另一页

2 个答案: