html – 有没有办法在CSS中保留锚点?
发布时间:2020-12-14 21:31:49 所属栏目:资源 来源:网络整理
导读:我有一个固定的标题高50px。在我的身体里,我有很多的锚点。问题是,当我点击指向锚点的链接时,锚点会显示在我的固定标题下,我丢失了50px的内容(我需要向上滚动50像素以读取标题下的内容)。 有没有办法保留50px的锚点?我的身体充满了很多盒子(divs),它们
我有一个固定的标题高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>? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |