如何在形式粘性(即分别固定在表单的顶部和底部)的形式内部制作标头和页脚

Question

在以下SSCCE中，

1. 我想将.header和.footer粘在其父容器的顶部和底部。因此，我将top:0px和bottom:0px位置偏移应用于它们。但这似乎不起作用。问题是为什么以及如何实现我想要的东西？

2. 我想修复.header和.footer，以便当内容滚动时，.header和.footer不会；他们宁愿保持固定。我怎么做？应用position:fixed使它们粘在整个页面的顶部和Botton（而不是他们的父母）。

body {
  background-color: rgba(0, 0, 0, 0.5);
}
.container {
  width: 40%;
  height: 70vh;
  background-color: white;
  margin: 5% auto;
  position: relative;
}
.header {
  border-bottom: 1px solid grey;
  top: 0px;
  position:absolute;
}
.footer {
  border-top: 1px solid grey;
  bottom: 0px;
  position:absolute;
}
.content {
  padding:20px;
  overflow:auto;
}

<form class="container">
  <div class="header">I am the header</div>
  <div class="content">I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content. I am the content</div>
  <div class="footer">I am the footer</div>
</form>

Answer 1

使用position: absolute并应用padding-top＆amp;padding-bottom根据.header＆amp;.footer分别。

请查看下面的片段：

body {
  background-color: rgba(0, 0, 0, 0.5);
}
.container {
  width: 40%;
  height: 70vh;
  background-color: white;
  margin: 5% auto;
  position: relative;
}
.header {
  border-bottom: 1px solid grey;
  top: 0px;
  position: absolute;
  width: 100%;
  background: #fff;
}
.footer {
  border-top: 1px solid grey;
  bottom: 0px;
  position: absolute;
  width: 100%;
  background: #fff;
}
.content {
  padding: 20px 0;
  overflow: auto;
  height: calc(100% - 40px); /* 20px for top header & 20px for bottom footer */
}

<div class="container">
  <div class="header">I am the header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quasi recusandae consequuntur totam obcaecati non, libero nisi a ipsa dolorem, ipsam eveniet reiciendis perferendis quia ut suscipit, nemo, numquam fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio reprehenderit dolorem harum ipsum, eum, non voluptatem alias voluptatibus voluptatum ullam nostrum deserunt vel doloribus amet eveniet aliquam fugit mollitia quia!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus accusantium laborum hic molestias facere aperiam iste libero non delectus optio cupiditate, officia commodi incidunt odit rem at quo temporibus animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam voluptates eius beatae maiores, placeat ad laborum incidunt aliquid, quaerat sed, non molestiae. Ullam sapiente quis cupiditate debitis ducimus perferendis delectus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quod sit vero provident quaerat a eveniet libero obcaecati iusto temporibus blanditiis minus, non pariatur dolorem minima, sed facilis, corporis cum.</div>
  <div class="footer">I am the footer</div>
</div>

希望这会有所帮助！