HTML书签与固定页眉/页脚不正确对齐

Question

我确信有一个简单的修复方法，但确实很难——我有一个以引导程序为主题的页面，有两列，一列用于导航窗格，另一列用于内容。有一个固定的页眉和一个页脚。内容窗格使用书签跳转到内容中的标题。

我遇到的问题是，当我单击导航窗格中的项目时，内容窗格会移动，因此标题会在固定标题后面离开屏幕。有人能建议我需要补充什么吗？

我在这里制作了一个简单的演示页面：https://scroll-issue.azurewebsites.net/interpreting2.php.

如果有任何建议，我将不胜感激。

感谢

Answer 1

当您使用同一页面链接将元素带入视图时，浏览器会将该元素定位在页面顶部。由于页面顶部有一个图像和导航栏，因此前121个像素被这些元素覆盖。通过在顶部报表分区的顶部添加填充，可以将内容放在页面的较低位置。因为当页面第一次打开时，除法在页面上的位置要低得多，所以可以通过在包含的列中添加负边距来将列上移。要获得后续组(我已经将其放入自己的分区中，这样更容易设置样式(，请在上一个分区的顶部添加相同的填充，并在底部添加负边距。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
html {
height: 100%;
scroll-behavior: smooth;
}
body {
height: 100%;
}
.banner {
height: 100px;
position: fixed;
top: -15px;
left: -10px;
z-index: 1039;
/* 1040 is modal dialog */
}
/* Make fixed navbar below EES graphic and right colour */
.navbar-fixed-top {
top: 70px !important;
background-color: #281A39 !important;
}
.navbar-fixed-bottom {
background-color: #281A39 !important;
}
/* Colour menu items better for new navbar colour */
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand {
color: #efebef;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
background-color: #281A39 !important;
}
@media (min-width:992px) {
.affix-md {
position: fixed;
}
}
#main-row {
padding-top: 11rem;
}
#contents {
z-index: 1; /* so it's not covered by the other column */
}
#reports {
margin-top: -11rem;
}
#report-1, #report-2 {
padding-top: 11rem;
}
#report-1 {
margin-bottom: -11rem;
}
</style>
<img src="https://via.placeholder.com/2545x124.png/281A39/FFFFFF?text=filler-image" class="banner">
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" style="z-index:5000;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="interpreting2.php">Scroll Issue</a></div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="interpreting2.php"><span class="header-icon glyphicon glyphicon glyphicon-list-alt" aria-hidden="true"></span> Interpreting Your Report</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row" id="main-row">
<div class="col-xs-12 col-md-2" id="contents">
<div class="affix-md">
<h1>Contents</h1>
<a href="#report-1">Report Top</a><br>
<a href="#report-2">Second Heading</a>
</div>
</div>
<div class="col-xs-12 col-md-10" id="reports">
<div id="report-1">
<h1>Interpreting Your Report</h1>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
<p class="mb-5">Very long content</p>
</div>
<div id="report-2">
<h1>Another Heading</h1>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<p class="mb-5">Second heading content</p>
<br />CONTENT - END
</div>
</div>
</div>
</div>
<nav class="navbar navbar-inverse navbar-fixed-bottom visible-lg visible-md visible-sm">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<p class="navbar-text">This is the footer</p>
</ul>
</div>
</nav>