在以下SSCCE中，
我想使.header和.footer分别停留在其父容器的顶部和底部。因此，我将top:0px和bottom:0px位置偏移量应用于它们。但这似乎不起作用。问题是为什么以及如何实现我想要的？
我想固定.header和.footer，这样当内容滚动时，.header和.footer不需要；他们宁愿保持固定。我怎么做？应用position:fixed会使它们分别粘在整个页面的顶部和底部（而不是其父级）。
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>最佳答案
使用position: absolute并分别根据padding-top和padding-bottom的高度应用.header和.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>希望这可以帮助！