如何强制网页的主要部分从粘性导航栏（仅CSS）下方开始？

我想制作的网页包含一个粘性导航栏和一些div，页面的其余部分有文本。我想通过在文本div的标题处添加一个目标锚点，从导航栏链接到页面的另一部分

这样做，我注意到我的网页顶部隐藏在导航栏后面。结果就是我链接的标题也被隐藏了

HTML:

有关更多代码，请参阅

我找到了一些解决方法：

在主体部分添加“填充顶部：50px”。乍一看，这看起来不错，但当我链接到页面的另一部分时，这并不能解决问题

使用“：before”在要导航到的div上方添加空间。问题是它明显地增加了一些空间，这是不可取的

将“：target{padding top:50px}”添加到代码中。这似乎是一个解决办法，在我想解决这个问题的上下文中也是不可能的（Wordpress）

那么，如何修复页面的主要部分总是从导航栏下方开始的问题呢？这是否仅适用于CSS

---

谢谢：-）

您可以将父级设置为flexbox

列

，并将底部区域设置为

flex grow:1；溢出y：滚动

@导入url（“https://fonts.googleapis.com/css?family=Armata");
* {
框大小：边框框；
}
身体{
保证金：0；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
.主导航{
背景色：#00c0ad；
}
.主导航.主导航列表{
保证金：0；
填充：0；
}
.main-nav\u列表项{
位置：相对位置；
显示：内联块；
背景色：#00c0ad；
右边距：-4px；
}
.main-nav_uu列表-a项{
显示：块；
文字装饰：无；
字体系列：“Armata”；
字号：1.5em；
颜色：#FFFFFF；
最小宽度：150px；
填充：15px 5px 15px 15px；
}
.main-nav_uu列表-a项：悬停{
背景色：#FFFFFF；
颜色：#00c0ad；
-网络工具包盒阴影：插入0px 0px 2px 0px#00c0ad；
-moz盒阴影：插入0px 0px 2px 0px#00c0ad；
盒影：插入0px 0px 2px 0px#00c0ad；
}
.主导航符号{
浮动：对；
}
.下拉列表{
位置：绝对位置；
显示：无；
填充：0；
}
ul.main-nav_uu列表项：悬停。垂直下拉{
显示：块；
}
ul li ul.main-nav_u_列表项：悬停。水平下拉{
显示：块；
宽度：100vw；
排名：0；
左：100%；
}
.下拉列表水平li{
浮动：左；
}
.下拉水平li a{
宽度：200px；
}
ul li ul li.主导航列表项：悬停。下拉水平垂直{
显示：块；
}
主要{
柔性生长：1；
溢出y：滚动；
}
.科{
明确：两者皆有；
宽度：计算（50vw-15px*2.5）；
利润率：15px 15px；
}
.节.节标题{
字体系列：“Armata”；
字号：1.5em；
}
.左{
浮动：左；
}
.对{
浮动：对；
}

第一节

Lorem ipsum dolor sit amet，是一位杰出的献身者。奥古斯·洛雷姆的整数。乌拉姆科珀尼斯湖悬液，维特静脉曲张悬液。阿利奎姆·尼布·努克，我们坐在阿梅特·森农的位子上，亨德雷特·廷西登·尼西。暂时中止
这是我的梦想。不做任何事，不做任何事，不做任何事。努克·乌鲁斯·奥迪奥。库拉比图尔·奥纳雷·塞莱里克·亨德雷特。猫斑前庭。不要坐在那里。等分
Vivate viverra ex.Pellentesque ac nisi sagittis、ultrices nisl nec、Pat quam。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。ultricies auctor iaculis。整型finibus ornare eros，nec commodo
努拉。在turpis vel urna elementum dictum中执行。梅塞纳斯和费尔吉亚·努拉。在hac habitasse Plateum，一句名言。塞德·波苏尔、非弗林蒂利亚猫、佩伦茨克猫、nec varius enim ex-vel enim。这是一辆多尔车。
现代的生活是暂时的。直径为零，分子为ac，静脉曲张。整型坐在阿美特乌尔特里斯莱克图斯。在《权杖奥古斯自由》（scelerisque augue libero）中，在索达莱斯玉米饼（sodales tortor fringilla）中。埃尼安·普尔文纳侵权人，自由女神，
非枕叶元素。没有效率的猫，没有尊严。Donec位于sapien ac tortor venenatis tempus et eget，该公司是一家专业的汽车拍卖商。前庭。酵母菌。拉奥里特庄园
tortor tortor，luctus调味品enim auctor quis。莫比·韦尔斯·韦尔斯·韦利特·法雷特拉·迪格森（Morbi vel tellus ac velit pharetra Dignessim）。前庭发情期，发情期。Phasellus nec ultrices libero。发酵液中的乳酸菌素。美国犹他州
拉齐尼亚·沃里帕特·普卢斯，在封建的莱克托斯·瓦里乌斯坐在阿梅特。这是我生命中最美好的时刻。他坐在那里，一点也不害怕。前庭前前庭前前庭
<nav class="main-nav">
  <ul class="main-nav__list">
    <li class="main-nav__list-item">
      <a href="#one">One</a>
    </li>
    <li class="main-nav__list-item">
      <a href="#two">Two</a>
    </li>
  </ul>
</nav>

.main-nav {
  position: fixed;
  width: 100vw;
  background-color: $colorGreenBlue;
  .main-nav__list {
    margin: 0;
    padding: 0;
  }
}

$("a[href*='#']:not([href='#'])").click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 100
      }, 1000);
      return false;
    }
  }
});