Question

我有3个divs页眉，内容和页脚。他们都将位置固定。

如何自动将DIV（内容）高度设置为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<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>

Answer 1

calc() CSS函数可让您在设置高度，宽度或其他属性的同时执行计算。

对于您而言，height: calc(100% - 30px);可以为您提供帮助。

有关calc()的更多详细信息，请参阅MDN。

Answer 2

要固定高度或宽度，可以使用calc(100% - 30px);。要处理动态变化的高度/宽度，您需要使用这样的Java脚本进行计算。...

var screenHeight = window.innerHeight;
var headerH = document.getElementById("header").offsetHeight;
var footerH = document.getElementById("footer").offsetHeight;

document.getElementById("content").style.height = ((screenHeight - headerH) - footerH) + "px";
document.getElementById("content").style.top = headerH + "px";

.header{
  background-color:red;
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
}

.footer{
  background-color:red;
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
}

.content{
  position:fixed;
  left:0px;
  background-color:yellow;
  width:100%;
}

<div class="header" id="header">header</div>
<div class="content" id="content">content</div>
<div class="footer" id="footer">footer</div>

Answer 3

添加高度：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>

Answer 4

对box2使用bottom: 30px;而不是高度。它会起作用。

如何将固定div高度设置为100％

4 个答案: