我有一个固定的标题高50px。在我的身体里，我有很多的锚点。问题是，当我点击指向锚点的链接时，锚点会显示在我的固定标题下，我丢失了50px的内容(我需要向上滚动50像素以读取标题下的内容)。
有没有办法保留50px的锚点？我的身体充满了很多盒子(divs)，它们之间有一个边距，所以我不能放置一个50px的空的div，然后锚定它。
HTML：
<div id="header"></div>
<div id="content">
<div class="Box" id="n1"></div>
<div class="Box" id="n2"></div>
<div class="Box" id="n3"></div>
</div>
CSS：
#header{
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
position: fixed;
text-align: center;
z-index:2;
}
#content{
padding-top: 50px;
margin: 0px;
}
.Box {
width: 80%;
margin-left: auto;
margin-right: auto;
vertical-align : top;
padding: 1.4%; /* Keep it in percent (%) */
margin-bottom: 30px;
min-height: 200px;
}
解决方法
如果标题是真正固定的，然后将您的锚点放在可滚动的div中。那么包含锚点的div将滚动而不是整个页面。访问小提琴并点击anchor1。它到anchor2。等等。
http://jsfiddle.net/mrtsherman/CsJ3Y/3/
css – set overflow隐藏在body上，以防止默认滚动。在顶部和底部设置的新内容区域上使用位置绝对。这迫使它拉伸以适合剩余的视口窗口。
body { overflow: hidden; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background: gray; border: 1px solid black; }
#content {
overflow: scroll;
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
border: 1px solid blue;
}
HTML
<div id="header">header</div>
<div id="content">
<div>
Page Content <br />
<a id="a1" href="#anchor2" name="anchor1">Anchor 1</a>
<a id="a2" href="#anchor1" name="anchor2">Anchor 2</a>
</div>
</div>
