固定定位的标题和href问题答案

【问题标题】：Issue with fixed positioned header and href固定定位的标题和href问题
【发布时间】：2019-02-21 03:43:14
【问题描述】：

我正在为页内链接和固定标题而苦苦挣扎。我有一个 50px 的粘性标题（位置固定）。即使在页面中向下滚动，这也使我始终可以看到标题。在我的页面中，我有一个菜单，其中包含指向页面中其他部分的链接。我使用href 和IDs 目标。问题是当我点击链接时，页面将目标定位在页面的最顶部，标题将我的目标部分隐藏了 50px。

下面的代码显示了问题

<html>
<head>
        <style>
        .header {
            position: fixed;
            top: 0px;
            right: 0;
            left: 0;
            margin-left: auto;
            margin-right: auto;
            background-color: red;
            height: 50px;
        }

        .container1 {
           content: none;
           height: 200px;
           background-color: green;
         }
        .container2 {
           content: none;
           height: 800px;
           background-color: lightblue;
        }


    </style>
</head>

<body>

    <div class="header">header</div>

    <div class="container1"></div>
    <div class="container2">

        <a href="#block1">block1</a>

        <div id="block1">Some text</div>            
    </div>

</body>

【问题讨论】：

问题似乎是possible duplicate。

标签： html css

【解决方案1】：

这就是锚的工作方式。为了实现您的目标，请尝试为目标提供标题高度的填充。这样就解决了。

#block1 {
  padding: 60px 0;
}

【讨论】：

谢谢.. 我确实尝试过使用“边距”，但没有尝试使用填充。干杯。