如何在表单中粘贴页眉和页脚STICKY（即分别固定在表单的顶部和底部）？

Question

在下面SSCCE，

1. 我想使.header和.footer坚持自己的父容器的顶部和底部（分别）。所以我申请了top:0px和bottom:0px位置偏移量给他们。但这似乎并不奏效。问题是为什么以及如何实现我想要的？

2. 我想使.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>

Answer 1

使用position: absolute和分别根据.header & .footer的高度适用padding-top & padding-bottom。

在下面的代码片段看一看：

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>

希望这有助于！