如何将主要内容放在固定的标题下？

Question

对于我的班级，我们必须使用定位条和导航栏。当前，我们必须重新创建photoshop图像。

要求如下：将导航置于粉红色的标题上，将该标题放置在固定位置。

我知道想要将内容放在标题AKA leaving some space and then continue with the contents of the webpage.下，我似乎很难获得此“内容框”。我该如何实现？

header {
  position: fixed;
  width: 1366px;
  height: 100px;
  top: 0;
  background-color: rgb(205, 99, 105);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 20px;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
  text-align: center;
}

.navigatie-midden li {
  display: inline;
  margin-left: 10px;
}

main {
  position: absolute
  margin: 0 auto;
  width: 400px;
  border: solid 1px;
}

<header>
  <ul class="navigatie-midden">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About </a></li>
    <li><a href="#"> Portfolio </a></li>
    <li><a href="#"> Archive </a></li>
    <li><a href="#"> Resources </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</header>

<main>
  Content
</main>

Answer 1

您快到了。您所需要的只是main的最高利润。我添加了额外的内容，以便您可以滚动查看其功能。内容将消失在标题下。

header {
  position: fixed;
  width: 1366px;
  height: 100px;
  top: 0;
  background-color: rgb(205, 99, 105);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  height: 20px;
  border-top: solid 1px;
  border-bottom: solid 1px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 30px;
  text-align: center;
}

.navigatie-midden li {
  display: inline;
  margin-left: 10px;
}

main {
  width: 400px;
  border: solid 1px;
  margin-top: 100px;
}

<header>
  <ul class="navigatie-midden">
    <li><a href="#"> Home </a></li>
    <li><a href="#"> About </a></li>
    <li><a href="#"> Portfolio </a></li>
    <li><a href="#"> Archive </a></li>
    <li><a href="#"> Resources </a></li>
    <li><a href="#"> Contact </a></li>
  </ul>
</header>

<main>
  <p>Content 1</p>
  <p>Content 2</p>
  <p>Content 3</p>
  <p>Content 4</p>
  <p>Content 5</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</main>