将屏幕的高度拆分为正文和页脚

Question

>我需要将屏幕拆分为 2：正文（约占屏幕的 90%）和页脚（约占屏幕的 10% - 固定在底部）。页脚应该是透明的，正文应该有很多文本，所以是一个垂直滚动条。我的问题是身体的高度不是高度的 90%（而是 100%），所以我可以看到页脚后面的文本。

我该如何解决它？这是JSFiddle，显示了我的问题。

和代码：

.HTML：

<div id="body">
    texttext<br/>text<br/>text
</div>
<div id="footer">
    this is footer
</div>

.CSS：

#body{
  height:80%;
}
#footer{
    width:100%;
    height:30px;
    position:fixed;
    bottom:0;
    left:0;
    color: blue;
    text-align: center;
    background: red;
    opacity: .5;
}

谢谢

Answer 1

相应地改变你的身高，但你所需要的只是（CSS）：

html, body {
    height: 100%;
}
#body {
    overflow: scroll;
}

小提琴：https://jsfiddle.net/96jfew5s/4/

Answer 2

您必须将父级（html 和 body 标签）也设置为高度的 100%，因为否则您无法为其孩子设置百分比（他们试图获得父母的百分比）。然后，您可以设置overflow-y: auto;以在bodydiv中获取滚动。

此外，将适当的高度更改为 body 和 footerdiv。

注意：我建议您将bodydiv的名称更改为与保留字无关的其他名称，以避免混淆。

html, body{
  height: 100%;
  height: 100%;
  width: 100%;
  margin: 0;
}
#body{
  height:90%;
  max-height: 90%;
  overflow-y: auto;
}
#footer{
  width:100%;
  height:10%;
  position: fixed;
  bottom:0;
  left:0;
  color: blue;
  text-align: center;
  background: red;
  opacity: .5;
}

<div id="body">
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
<div id="footer">
this is footer
</div>

Answer 3

使用视口单位：vw、vh、vmin、vmax

*{box-sizing: border-box}
body{
  margin: 0
}
#body{
  height: 90vh
}
#footer{
    height:10vh;
    color: blue;
    text-align: center;
    background: red;
    opacity: .5;
}
#body,#footer{
  display: block;
  overflow-x:hidden;
  overflow-y: scroll
}

<div id="body">
    texttext<br/>text<br/>text
</div>
<div id="footer">
    this is footer
</div>