Question

我的网站有：

页面顶部的导航栏
4个部分
页脚

特点：

导航仪的高度应为10vh
前3个部分的高度应为90vh
最后一节和页脚的高度分别应为80vh和10vh（因此它们的总高度为90vh）

我想要什么：

当我单击“关于”导航链接时，我希望网站滚动，以便导航占据页面顶部的10％，而“关于”部分恰好占据了其下面页面的90％。尽管我不会在网站的最终版本中使用这些颜色，但我还是将部分交替显示为白色和蓝色，以帮助演示我想要的内容。

这意味着当我单击“关于”时，您只会看到黑色的导航栏和蓝色的“关于”部分，如下所示：

但是，当我单击“关于”链接时，这是我得到的：

如您所见，它没有正确排列。 “关于”部分的顶部与页面顶部对齐。但是我希望“ about”部分的顶部与导航栏的底部对齐。因此，在单击徽标和“投资组合”链接后，应该看不到蓝色，而在单击“关于”和“联系”链接后，应该看不到白色。

我尝试过的事情：

我尝试在每个部分添加一个“分隔符” div，该高度与导航仪的高度相同，这有点奏效。但这并不是真正的解决方案，因为我要弄乱整个断面的高度。

这是我的HTML和CSS：

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Helvetica;
}

body #menu,
body #home,
body #about,
body #portfolio,
body #contact,
body #footer {
    padding: 0% 10%;
}

#menu {
    height: 10vh;
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
}

#home, #about, #portfolio {
    height: 90vh;
}

#contact {
    height: 80vh;
}

#footer {
    height: 10vh;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}

a {
    text-decoration: none;
    color: white;
}

a:hover {
    color: red;
}

h1 {
    margin: 0;
}

#about, #contact {
    background-color: blue;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">

<head>
    <title>António Gonçalves</title>
    <meta charset="UTF-8">
    <meta name="author" content="António Pedro Gonçalves">
    <link href="style.css" type="text/css" rel="stylesheet">
</head>

<body>

    <nav id="menu">
        <a href="#home">Logo</a>
        <a href="#about">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
    </nav>

    <section id="home">
        <h1>Home</h1>
    </section>

    <section id="about">
        <h1>About</h1>
    </section>

    <section id="portfolio">
        <h1>Portfolio</h1>
    </section>

    <section id="contact">
        <h1>Contact</h1>
    </section>

    <footer id="footer">
        <p>Copyright © 2019 António Gonçalves</p>
    </footer>

</body>

</html>

帮助？

如何使粘性导航滚动到div而不重叠？

0 个答案: