javascript - 如何设置固定的 div 高度 100%

Question

我有3个

• 标题
• 内容
• 页脚

他们都设置位置固定。

如何自动设置(内容)高度为100%？

问题是内容部分的最后一个文本被页脚 div 隐藏了。

如何设置内容 div高度自动计算100%-页脚高度？

html,body { height:100%; }
  .wrapper { position:relative; width:100%; height:100%}
  .box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
  .box2 { position:fixed; top:30px;left:0; width:100%; height:100%; overflow-y:auto; background:gray}
  .box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}

<div class="wrapper">
  <div class="box1">head</div>
  <div class="box2">content>last text</div>
  <div class="box3">foot</div>
</div>

Answer 1

添加高度:calc(100% - 60px);到 box2 减去页眉和页脚的高度并将 overflow-y:hidden 设置为 html,body 这样你就可以在没有滚动的情况下获得固定的 div 100% 高度

html,body { height:100%; overflow-y:hidden; }
.wrapper { position:relative; width:100%; height:100%}

.box1 { position:fixed; top:0;left:0; width:100%; height:30px; background:red}
.box2 { position:fixed; top:30px;left:0; width:100%; height:calc(100% - 60px); overflow-y:auto; background:gray}
.box3 { position:fixed; bottom:0;left:0; width:100%; height:30px; background:blue}

<div class="wrapper">

<div class="box1">head</div>
<div class="box2">content<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>last text</div>
<div class="box3">foot</div>

</div>