Question

我尝试使用以下方法创建一个锚点：

<a href="index-xxx.html#reference-name"> and

<a name="reference-name">

问题是我在顶部有一个浮动边距，锚点位于隐藏文本顶部的页面顶部。

是否有一种简单的方法可以使用HTML为顶部边距添加相对间距？

我是新手并使用我在网上找到的模板。我已经发现从新鲜开始而不是使用模板会更容易，但我现在太过分了，我真的不明白如何更改CSS来做到这一点。有更简单的答案吗？

非常感谢那些一直在寻找答案的人。

Answer 1

编辑：我已根据提供的代码进行了更新。

基本上我们有一些效果：

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
    #main {
        min-width: 980px;
        margin: 0 auto;
        font-size: 0.75em;
        padding:101px 0 37px 0;
    }
    header {
        height:101px;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        z-index:100;
    }
    footer {
        overflow: hidden;
        position:absolute;
        bottom:0;
        left:0;
        width:100%/*; height:37px*/;
        background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
        color:#9d9d9d;
        text-transform:uppercase
    }
</style>
</head>
<body>
<div id="main">
    <header>...</header>
    <section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
    <footer>...</footer>
</div>
</body>
</html>

正如所写，锚点链接被埋在顶部导航下。似乎唯一可靠的解决方法是使用“CSS帧”来正确显示内容，这需要进行以下CSS调整：

#main 
{
    padding:0 0 37px 0;
}
section#content
{
    position:fixed;
    top:101px;
    width:100%;
    bottom:37px;
    overflow:auto;
}
footer 
{
    position:fixed;
    height:37px;
}

所以我从#main。

中删除了顶部填充

然后我将内容和页脚定位。因此，内容必须向下移动101px，因此最高。

然后，我必须给页脚一个高度，然后在内容上添加相同数量的底部。

溢出自动为我们提供滚动条，宽度为100％将这些条形放在合理的位置。

在IE 9，Chrome 10，Firefox 4和Opera 11上进行了测试。

编辑2：不幸的是我在网上找不到这个特殊的方法。 Eric Meyer在Smashing CSS中谈到它。它看起来不像现有资源在线测试锚链接如何与内容一起使用，这是非常不幸的。

如何创建一个锚点

1 个答案: