html - 选择导航链接时如何停止网页标题滚动到屏幕外

问题描述

我在使用以下 CSS/HTML 时遇到了一些问题。这是在 Mac 上，但同时出现在 Safari 和 Chrome 上，所以它似乎是我的 CSS。

我正在尝试获取一个简单的网页来显示个人项目的基本文档。我有一个“固定”标题，然后是导航部分和下面的主要部分。

一般设置工作正常：我可以单击导航栏中的链接，主要部分滚动到该链接。

问题是，如果主要内容太长（即比当前视口长），那么当主要部分滚动到该位置时，标题会滚动到屏幕顶部，如果不调整浏览器窗口的大小，我就无法将其取回.

我假设它与 CSS 相关，可能与此有关，flexbox但我不知道足够的 CSS 能够正确地构建问题以在此处进行搜索。因此，如果以前有人问过这个问题，或者这是一个很好理解的技术，我们深表歉意。

:root {
    --nav-width: 24rem;
    --nav-padding: 1rem;

    --article-width: 72rem;
    --article-padding: 1rem;

    --main-padding: 2rem;
    --main-width: calc(var(--nav-width) + var(--article-width));

    --header-width: var(--main-width);
    --header-padding: 1rem;

    --body-padding: 10rem;
    --body-width: calc(var(--main-width) + 2 * var(--body-padding));
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;
}

body {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 auto;
    font-family: serif;
    font-size: 1.6rem;
    overflow: hidden;
}

header {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: var(--header-width);
    margin: 0 auto;
    padding-top: var(--header-padding);
    padding-bottom: var(--header-padding);
    border-bottom: 1px solid black;
}

main {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    height: 100%;
    margin: 0 auto;
    padding-top: var(--main-padding);
    padding-bottom: var(--main-padding);
}

nav {
    box-sizing: border-box;
    flex: 0 1 auto;
    width: var(--nav-width);
    height: calc(100% - 2 * var(--nav-padding));
    padding-top: 2rem;
    margin: 0;
    padding: var(--nav-padding);
    overflow-y: auto;
    counter-reset: nav-annex;
}

article {
    box-sizing: border-box;
    flex: 1;
    flex-direction: row;
    max-width: var(--article-width);
    width: var(--article-width);
    height: calc(100% - 2 * var(--article-padding));
    padding: var(--article-padding);
    padding-top: 0;
    padding-right: calc(2 * var(--article-padding));
    margin: 0;
    overflow-y: auto;
}

footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid;
    margin-top: 2rem;
}

footer p {
    font-size: 1rem;
}


p {
    margin: 1.5rem 0;
    text-align: justify;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #111;
    line-height: 125%;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: normal;
}

h1 {
    font-size: 4rem;
    margin-top: 0;
    font-weight: bolder;
    font-variant: small-caps;
}

h2 {
    font-size: 3.25rem;
    margin-top: 3rem;
}

h3 {
    font-size: 2.5rem;
    margin-top: 2rem;
}

nav ul, nav li {
    list-style-type: none;
    padding: 0 0 0 0.5rem;
}

nav > ul:first-of-type > li > a {
    font-variant: small-caps;
    font-size: 1.5rem;
}

nav > ul > li > a {
    font-weight: bold;
}

nav ul ul {
    padding: 0 0 0 1rem;
    margin: 0 inherit;
}

nav a {
    font-size: 1.33rem;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="generator" content="pandoc">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="author" content="phil">
  <title>Test</title>
  <style type="text/css">code{white-space: pre;}</style>
  <link rel="stylesheet" href="./test.css">
</head>
<body>
<header>
  
  <div>Header</div>
  <div>
header things
  </div>
</header>
<main>
  <nav id="TOC">
  <ul>
<li><a href="#TITLE">page title</a></li>
  </ul>
    <ul>
    <li><a href="#overview">Overview</a>
    <ul>
    <li><a href="#section-1">section 1</a></li>
    <li><a href="#section-2">section 2</a></li>
    </ul>
  </li>
    
</nav>
<article>
<h1 id="TITLE">Page Title</h1>
<h2 id="overview">Overview</h2>
<h3 id="section-1">section 1</h3>
<p>Fugiat nisi cupidatat do deserunt voluptate amet ipsum ea exercitation nisi excepteur. Officia laborum culpa duis labore cillum id tempor duis enim. Deserunt sint deserunt ex anim nostrud laborum ad ea. Elit dolore velit deserunt adipisicing esse eu. Et veniam minim aliquip ipsum officia tempor fugiat elit laborum sunt consectetur.</p>

<h3 id="section-2">section 2</h3>
<p>Et magna nulla deserunt excepteur aliquip tempor non exercitation commodo. Excepteur pariatur nostrud ea aliqua dolore. Irure culpa quis sit Lorem reprehenderit ad consectetur adipisicing Lorem laboris. Do culpa aliquip veniam ea deserunt reprehenderit cupidatat consequat officia.</p>

<footer>
<p>footer stuff
<p>
<p><span>Modified: 2020-05-05 by phil</span></p>
</footer>
</article>
</main>
</body>
</html>

任何帮助，将不胜感激！

谢谢

标签： htmlcssflexbox

html - 选择导航链接时如何停止网页标题滚动到屏幕外

问题描述

解决方案

推荐阅读