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

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

使用Viewport units: 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>

Answer 3

你也必须设置你的父母（html和body标签），以高度的100％，因为如果没有你不行为他们的孩子设定百分比（他们试图获得父母的百分比）。然后，您可以设置您的overflow-y: auto;以获取您的body div中的滚动。

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

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

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>