Html 使用CSS的命令行布局

我正在尝试使用CSS制作一个有用的命令行布局。我的inkscape草稿如下所示：

底部的

div

具有固定的高度和灵活的宽度。顶部的

div

必须具有灵活的两个维度

我也需要这个在移动设备上工作。过去，使用在移动设备上中断的相当复杂的javascript脚本

我一直在用“%”表示高度，但我想这不是很精确：

div#output {
  width:99%;
  height:90%; //NOT A GOOD IDEA. DEPENDS ON WINDOW SIZE
  overflow: scroll;//             - breaks on big/small screens                                   
  overflow-x: hidden;
  margin:0px;
  padding:5px;
}

---

我的问题是：如何在没有javascript的情况下做到这一点？如何修复JSFIDLE示例？

将html和正文的高度设置为100%。这就是90%的比例所针对的。

我会这样做

无需将

宽度设置为块元素。这里的高度很重要。将其设置为
100%
to body可使页面适合可用的屏幕高度（如果没有边距）

编辑

您是对的，
%
中的尺寸不精确，因此我决定使用position
absolute
和
right
，
left
，
top
，
bottom
属性来拉伸
div#output
，并为底部输入行设置固定边距

试试看
我会使用calc作为输出窗口的高度

正文的字体大小：0是删除两个div之间多余空格所必需的。
Calc正在减去40px，因为底部是30px，并且输出有5px的填充

使用绝对定位时，也可以不使用Calc

到底是什么问题？很好。祝你好运。你有问题吗？是的，没有javascript怎么做。这不是一个问题吗？@TomášZato好吧，你最初并没有把它放在那里，所以最初没有问题。现在有了。@ajp15243最后一个问题只是对课文内容的总结。我希望如此多的用户阅读我的整个帖子并理解它。如果其中的任何部分写得不好，因此很难理解，请随意使用编辑按钮。如果
具有100%的宽度，这是否总是意味着100%的屏幕大小？这意味着它具有父级的宽度，即HTML标记。老实说，我不太清楚这到底是怎么翻译的。这听起来是个好主意。但是，我不能通过使用
填充
进行输出，使用
位置：绝对
进行输入来避免
计算吗？事实上，你可以，我已经更新了小提琴，非常酷，谢谢。我希望这对其他人也有用。谢谢。但是试着调整小提琴的输出窗口大小。这就是为什么我说高度不是很精确。这取决于窗口大小。
*{
    margin:0px;
    padding:0px; 
}
html, body {
    height:100%; 
}
body {
    background: black;
    color: white;
    font-family: monospace;
    font-size:0;
}
div#output {
    height:calc(100% - 40px);
    overflow-y: scroll;
    overflow-x: hidden;
    padding:5px;
    font-size:14px;
}
div#bottom{
    height:30px;
    line-height:30px;
    font-size:14px;
}

*{
    margin:0px;
    padding:0px; 
}
html, body {
    height:100%; 
}
body {
    background: black;
    color: white;
    font-family: monospace;
    font-size:0;
}
div#output {
    position:absolute;
    top:5px;
    left:5px;
    right:5px;
    bottom:30px;
    overflow-y: scroll;
    overflow-x: hidden;
    font-size:14px;
}
div#bottom{
    position:absolute;
    left:5px;
    bottom:0;
    height:30px;
    line-height:30px;
    font-size:14px;
}