如何解决HTML 书签与固定页眉/页脚未正确对齐
我确信有一个简单的修复，但真的很困难 - 我有一个引导主题页面，有两列，一列用于导航窗格，另一列用于内容。有一个固定的页眉和页脚。内容窗格使用书签跳转到内容中的标题。
我遇到的问题是，当我单击导航窗格中的某个项目时，内容窗格会移动，因此标题位于固定标题后面的屏幕之外。请有人建议我需要添加什么吗？
我在这里做了一个简单的演示页面：https://scroll-issue.azurewebsites.net/interpreting2.php。
如果您有任何建议，我将不胜感激。
谢谢
解决方法
当您使用同页链接将元素带入视图时，浏览器会将元素放置在页面顶部。由于页面顶部有一个图像和导航栏，顶部 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
