内容高度在固定页眉和固定页脚之间扩展

Question

我有一个固定的页眉和一个固定的页脚，它们应该始终在窗口中可见。

问题：我想在页眉和页脚之间展开一个“主框”。在该主框中是文本框，该框的高度应相对于到页眉和页脚的距离。我认为这张图片可以更好地说明我要归档的内容：

页眉和页脚的高度也可以固定。

<div id="wrapper">
  <div id="header"></div>>
  <div id="main">
  <div id="textbox"></div>
</div>
<div id="footer"></div>

Answer 1

使用html可以尝试使用</br>

<div id="wrapper">
      <div id="header"></div>

      </br></br>

      <div id="main">
      <div id="textbox"></div>
    </div>

    </br>

    <div id="footer"></div>

Answer 2

您可以同时为{{1}和position: fixed添加position them。

#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px; /*height you want*/
    z-index: 1;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px; /*height you want*/
    z-index: 1;
}

然后，使用所需的高度和填充物放置主框。可能是这样的：

#main {
    position: absolute;
    height: calc(100vh - x); /* "x" would be the sum of header and footer heights*/
    width: 100%;
    top: 100px; /* the height of your header*/
}
#textbox {
    margin: 30px 0 20px 0;
    width: 100%;
    height: calc(100% - 50px);
    z-index: 1;
}