Question

我有一个页面顶部有一个固定的标题，高度为63像素。在这下面我有不同的页面部分（div），它们本质上是单独的页面。每个部分都在标题中链接，作为相关div id的锚链接。我遇到的问题是，当单击锚链接时，div的顶部开始在文档的顶部，而不是在标题下面。任何解决方案确实非常有用。

HEADER的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">

Answer 1

我有一个更好的解决方案来解决这个问题。

•首先在css中可以创建一个类（可以随意调用它）

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

•在实际div部分开始之前的HTML中，例如我的#landingcontainer你应该添加一个span标签，其中包含一个锚类（我们在上面做过）和一个你想要的id。对我来说，我这样做了：

<span class="anchor" id="landing"></span>

然后，实际链接现在不会链接到您要将其带到的部分的实际div ID，而是必须在链接中给出span标记的ID。

<a href="#landing">HOME</a>

并且你有它！

我们在这里做的实质上是让浏览器停止跨度开始的位置，这正好是标题的高度，这使得观察者不再明智;）

Answer 2

只需将padding-top: 63px;添加到您锚定链接到的元素即可。即，假设的<div id="sauceslanding">会有#sauceslanding { padding-top: 63px; }的CSS，其中包含<a href="#sauceslanding">Sauces</a>的链接。

测试过，这对我有用。如果它对您不起作用，请创建一个jsfiddle或一些我们可以玩的实时测试，以查看您的代码中是否存在问题。

<强>更新

你有这个：

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-image:url("../images/menu/menu_bg.png");
    background-size:cover; 
    background-repeat:no-repeat;
}

将其更新为：

#menucontainer{
    position:relative;
    width:100%;
    height:700px;
    background-color:#1d0f00;
    padding-top:63px;
    background-image:url("../images/menu/menu_bg.png");
}
/* END MENU CONTAINER */

/* MENU CONTENT */
#menucontent{
    position:relative;
    width:1280px;
    height:700px;
    margin-left:auto;
    margin-right:auto;
    background-size:cover; 
    background-repeat:no-repeat;
}

然后您可能会看到图像的顶部被切断，就像没有填充一样。您需要做的是修改背景图像以获得额外的63px死区（将栅栏图案向北延伸）。然后你很高兴。

Answer 3

在Muhammed Bhikha's solution的基础上，您可以将多余的标记应用于要用作锚定目标的任何元素的::before元素，从而完全避免额外的标记。例如，此版本在所有具有::before的元素和所有id具有a的元素上使用name伪元素（例如，通常的目标）。（您可能希望通过一个类来缩小范围，具体取决于您是否正在将::before的某些元素用于{say [1]}。）

id

示例：

a[name]::before,
[id]::before {
    content: '';
    display: block;
    visibility: hidden;
    height: 63px;      /* this is the height of your header */
    margin-top: -63px; /* this is the height of your header, negated */
}

header {
    position: fixed;
    min-height: 63px;
    top: 0;
    width: 100%;
    height: 63px;
    background-color: blue;
}

main {
    margin-top: 63px;
}

a[name]::before,
[id]::before {
    content: '';
    display: block;
    visibility: hidden;
    height: 63px;      /* this is the height of your header */
    margin-top: -63px; /* this is the height of your header, negated */
}

Answer 4

我有一些<p class="paragraph" id="#uniqueid">标签，因此元素上没有预设/可预测的高度。最好的解决方案 - 不会对其他已建立的CSS /布局造成严重破坏 - 来自CSS-tricks：

div#container p.paragraph:before {
  content: " "; 
  margin-top: -180px; 
  height: 180px; 
  visibility: hidden; 
}

没有其他需要。

（对于想要使用此解决方案的任何人，仅供参考：只要您不需要受影响元素中的任何内容即可点击/选择，因为此方法似乎与实际的屏幕位置相混淆事情。但是对于随意浏览很好。）

锚点链接从头部固定在顶部开始

4 个答案: