我有一个页面，顶部有一个固定的标题，高度为 63 像素。在此之下，我有页面的不同部分（div），它们本质上是单独的页面。每个部分都在标题中链接为相关 div id 的锚链接。我遇到的问题是，当单击锚链接时，div 的顶部从文档的顶部开始，而不是在标题下方。任何解决方案都会非常有帮助。
标题的 CSS 代码：
#headercontainer{ position:fixed; background-color:#1a1813; top:0px; left:0px; width:100%; height:63px; z-index:1;}
#headercontent{
position:relative;
background-image:no-repeat;
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}
第一部分的 CSS 代码（单击锚点时应位于标题下方：
#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}
#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;
}
需要的 HTML 到点：
<!-- START BODY CONTAINER -->
<div id="bodycontainer">
<!-- START HEADER -->
<div id="headercontainer">
<!-- START HEADER CONTENT -->
<div id="headercontent">
<div id="headerbg">
<a href="#landingcontainer"><div id="headerlogo"></div></a>
<div id="headercard"></div>
<div id="headernavigation">
<ul>
<a href="#menucontainer"><li>Menu</li></a>
<li>Sauces</li>
<li>Ranches</li>
<li>Order</li>
<li>Franchise</li>
<li>About</li>
</ul>
</div>
<div id="headersociallinks"></div>
</div>
</div>
<!-- END HEADER CONTENT -->
</div>
<!-- END HEADER -->
<!-- START LANDING SECTION -->
<div id="landingcontainer">