请问已知页头和页尾的高度，如何实现自适应页面？

Z时代
2024-03-05
分类：IT

回答：

如果你的页面内容不多, 可以使用flex 布局

<!-- some code -->
<div class="content">
    <div class="header">header</div>
    <div class="container">container</div>
    <div class="footer">footer</div>
</div><!-- some code -->

* {
    padding: 0;
    margin: 0;
}
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
.content .header {
    width: 100%;
    height: 50px;
    background-color: pink;
}
.content .container {
    flex: 1;
    width: 100%;
    background-color: gray;
}
.content .footer {
    width: 100%;
    height: 60px;
    background-color: yellowgreen;}

回答：

你是问自适应高度的话：height:calc(100vh - 已知头尾高度)

回答：

方法一：

.content {
  height: calc(100vh - HEADER_HEIGHT - FOOTER_HEIGHT);}

方法二：

知道不知道 Header 与 Footer 高度都可以

.layout {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;}

不管什么方法，内容区域的滚动自己解决。

方法三：

body {
  position: relative;
}
.header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: HEADER_HEIGHT;
}
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: FOOTER_HEIGHT;
}
.content {
  padding: HEADER_HEIGHT 0 FOOTER_HEIGHT 0;}