html - 如何避免在具有固定高度内容的散列标签点击上滚动

Question

我目前遇到了一个棘手的散列 anchor 链接问题。这是我的 HTML 代码的简单表示:

<div class="main-wrap">
<header></header>

<aside>
    <nav>
        <ul>
            <li><a href="#article1">Article1</a></li>
            <li><a href="#article2">Article2</a></li>
            <li><a href="#article3">Article3</a></li>
        </ul>
    </nav>
</aside>

<section>
    <article id="article1">Content Here</article>
    <article id="article2">Content Here</article>
    <article id="article3">Content Here</article>
</section>

<footer></footer>

和CSS:

body{overflow: scroll;}

.main-wrap{
    overflow: hidden;
    position: relative;
}

header{
    position: relative;
    z-index: 3;
    height: 10vh;
}

aside{
    position: fixed;
    width: 22%;
    height: 84vh; /* Equal to 100vh - (header + footer)vh */
    top: 10vh;
    left: 0;
    bottom: 6vh;
}

section{
    position: relative;
    min-height: 84vh; /* Equal to 100vh - (header + footer)vh */
    width: 78%;
    left: 22%; /* Equal to aside width*/
}

footer{
    position: relative;
    z-index: 3;
    height: 6vh;
}   

我已经创建了一个侧边栏菜单，其中包含散列链接以进行滚动导航，据我所知，这是可行的。但是，当我单击散列 anchor 时，所有元素都向顶部移动了一点，包括页眉和页脚，并被 overflow:hidden; 属性隐藏.main-wrap 元素。此外，当我返回非散列页面时，问题仍在运行，除非我重新加载它。

我找不到任何关于如何修复它的线索。有什么想法吗？

已编辑:我还使用了将 body 和 html 填充和边距设置为 0 的 reset.css。

编辑 2 :我想我知道发生了什么。通过单击 anchor 链接，主体将被迫滚动 .main-wrap div，这就是为什么一切看起来都已移至顶部的原因。事实上，.main-wrap 的 overflow:hidden; 属性只是向下移动了一点，隐藏了错误的部分。

Answer 1

默认浏览器行为:

当您单击命名或散列链接时，浏览器将尝试滚动以使目标命名链接位于 View 顶部。

这也是您的代码所发生的情况。

另一种浏览器默认值:

对于 HTML 元素，大多数浏览器的默认边距和填充大于 0，包括 html 和 body 元素。

您计算的高度:84vh；/* 等于 100vh - (header + footer)vh */ 如果 html 和 body 将导致内容高度大于视口(viewport)高度标签的边距或填充大于 0(并使其可滚动，因为您有 body {overflow: scroll;})。

解决方案:

使用 css 重置，或者在您的情况下只需将其添加到您的 css

html,
body {
    margin:0;
    padding:0;
}

演示 https://jsfiddle.net/vkrhnf75/1/