粘性页眉和页脚可滚动内容

粘性页眉和页脚可滚动内容 方法1-Flexbox

它适用于已知和未知的高度元素。确保设置外股利

height:100%;

和重置默认

margin

的

body

。

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;  display: flex;  flex-direction: column;}.header, .footer {  background: silver;}.content {  flex: 1;  overflow: auto;  background: pink;}<div >  <div >Header</div>  <div >    <div >Content</div>  </div>  <div >Footer</div></div>

方法2-CSS表

对于已知和未知高度元素。它也可以在包括IE8在内的旧版浏览器中使用。

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;  width: 100%;  display: table;}.header, .content, .footer {  display: table-row;}.header, .footer {  background: silver;}.inner {  display: table-cell;}.content .inner {  height: 100%;  position: relative;  background: pink;}.scrollable {  position: absolute;  left: 0; right: 0;  top: 0; bottom: 0;  overflow: auto;}<div >  <div >    <div >Header</div>  </div>  <div >    <div >      <div >        <div >Content</div>      </div>    </div>  </div>  <div >    <div >Footer</div>  </div></div>

方法3-

calc()

如果页眉和页脚固定高度，则可以使用CSS

calc()

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;}.header, .footer {  height: 50px;  background: silver;}.content {  height: calc(100% - 100px);  overflow: auto;  background: pink;}<div >  <div >Header</div>  <div >    <div >Content</div>  </div>  <div >Footer</div></div>

方法4-所有百分比

如果页眉和页脚的高度已知，并且它们也是百分比，则只需执行简单的数学运算即可将它们的高度设为100％。

html, body {  height: 100%;  margin: 0;}.wrapper {  height: 100%;}.header, .footer {  height: 10%;  background: silver;}.content {  height: 80%;  overflow: auto;  background: pink;}<div >  <div >Header</div>  <div >    <div >Content</div>  </div>  <div >Footer</div></div>