html - 除非我需要滚动，否则如何使我的表单保持在我的标题下？

Question

所以我想这里的主要问题是，我能否将所有内容都放在标题导航栏下的固定位置，但如果我需要滚动，它就会放在标题下？这是我的 fiddle ，只是设置了 hr 标签的顶部边距，但在不同的屏幕尺寸上尝试后，它就不起作用了，而且在较小的屏幕上会重叠。

https://jsfiddle.net/RVKuzmik/se0etqew/3/

Code here

html,
body {
  padding: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  width: 100%;
}

header {
  top:0;
  position: fixed;
  width: 100%;
  padding-bottom: 1%;
  padding-top: 1%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  z-index: 1;
}


hr {
  margin-top: 10%;
}

<header>
  <nav>
    <ul>
      <li><a href="#">Campus</a></li>
    </ul>
  </nav>
</header>

<hr>

Answer 1

尝试将固定位置添加到您的表单中，这会起作用