过度滚动不正常，div不显示整体。

Question

所以我有一个div应该是这个图像的黑色部分：

但是div是窗口顶部的白色条纹。当我输入命令并弹出一些东西时，div会随着我的进展而扩展。像这样：

我有溢出：在div上滚动为css，但在我输入足够的命令后，溢出不能正常工作，如下所示：

它扩展到页脚下方和我输入命令的位置（底部的白色条纹。）

所以我的问题是如何使div与黑色部分一样大，以及如何解决溢出问题（额外的文本仅显示在页脚上方以及我输入命令的位置。这是我的代码： here https://jsfiddle.net/qb5xaw3c/

Answer 1

尝试使用flex

body { display: flex; }
#targetDiv { flex-glow: 90; overflow: auto; }
footer { flex-glow: 10; }

如果没有精确的JavaScript，则无法测试，这里是JsFiddle：https://jsfiddle.net/Zay_DEV/qb5xaw3c/1/

问题是您没有为body或#main定义任何高度，如果您这样做，则应使用overflow: auto;允许浏览器决定显示滚动条与否。另外，我不认为为页脚制作.main是一个好主意（语义问题）

编辑1 -

很抱歉它不应该使用flex，只需要一个简单的calc即可解决它

html, body { margin: 0; padding: 0; min-height: 100vh; }
footer { height: 100px; }
#targetDiv { height: calc(100vh - 100px - 30px); }

尝试：https://jsfiddle.net/Zay_DEV/3g88ugzd/1/

您仍需明确定义#targetDiv的高度才能使overflow发生。它不适用于%高度。