html - 如何响应地在两个部分之间创建恒定的边距/填充？

Question

我有两个部分堆叠在一起。我在容器 div 上使用 position:relative，然后在子 div 上使用 position:absolute s 相对于父容器的顶部定位它们。

这是我的代码(也在这个 JSFiddle 上):

html,body{height: 100%; width: 100%;}

h1{
  font-size: 20px;
  font-family: 'Avenir', sans-serif;
  color: #212121;
} 

h2{
  font-size: 18px;
  font-family: 'Avenir', sans-serif;
  font-weight: lighter;
  color: #424242;
}

p{
  font-family: 'Avenir', sans-serif;
  font-size: 18px;
}

.container{
  position: relative;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 10px;
  padding-right: 10px;
}

#header{
  position: absolute;
  top: 10px;
  max-width: 960px;
  line-height: 30px;
}

#header h1{padding-top: 5px;}
#header {max-width: 800px;}

#projects{
  position: absolute;
  top: 240px;
}

<div class = "container">
  <section id = "header">
    <h1>Name Lastname</h1>
    <h2>Description, Description</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod non metus id semper. Integer volutpat, mauris vitae pulvinar rhoncus, lacus lectus euismod augue, sit amet interdum lectus leo et magna. Curabitur in tellus vel tellus finibus faucibus quis sit amet risus. Etiam id sagittis ligula. Ut facilisis, nisi eu.!
    </p>
  </section>

  <section id = "projects">
    <p>Another paragraph on projects</p>
  </section>

</div>

我正在尝试使页面响应，但是当我减小页面宽度时，页眉 div(顶部)紧缩到底部元素 div 中，这使得它难以辨认。

如何在两个 div 之间创建一个恒定的间距？

Answer 1

正如上面评论中提到的，答案是删除position: absolute;。父容器内的默认流程是让子 div 堆叠。然后，您可以使用 margin-top 或 margin-bottom 调整子 div 之间的间距。