21

我有一个页面，顶部有一个固定的标题，高度为 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">
4

4 回答 4

49

对于这个问题，我有更好的解决方案。

• 首先在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>

你有它！

我们在这里所做的本质上是让浏览器在跨度开始的地方停止，这正是标题的高度，这使得查看器变得不明智；）

于 2012-10-23T19:30:20.707 回答
1

只需将 a 添加padding-top: 63px;到您要锚链接的元素。即一个假设<div id="sauceslanding">的 CSS 会#sauceslanding { padding-top: 63px; }带有指向它的链接<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;
}

然后您可能会看到图像的顶部随后被切断，就好像没有填充一样。然后您需要做的是修改您的背景图像以增加 63 像素的死区（将栅栏图案向北延伸）。那你就可以走了。

于 2012-10-23T18:14:31.557 回答
1

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

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

不需要其他任何东西。

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

于 2015-12-06T16:45:17.147 回答
1

在Muhammed Bhikha 的解决方案的::before基础上，您可以通过将其应用于您想要用作锚目标的任何元素的元素来完全避免额外的标记。例如，这个版本在所有带有 a 的元素和所有带有 a::before的元素上使用伪元素（例如，通常的目标）。（你可能想用一个类来缩小范围，这取决于你是否在 [say] 一些带有 s 的元素上使用其他东西。）idaname::beforeid

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 */
}
<header>
    Header
</header>
<main>
<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
    <li><a href="#four">Four</a></li>
    <li><a href="#five">Five</a></li>
</ul>
<p id="one">One: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a name="two"></a>Two: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="three">Three: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a name="four"></a>Four: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="five">Five: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- So there's room to scroll at the bottom -->
<div style="min-height: 100vh"></div>
</main>

于 2020-07-02T09:51:05.547 回答