Html 如何在不使用javascript的情况下使用css混合固定高度/宽度和百分比高度/宽度

我想实现如下布局：

 -----------------------------------------------------------
|                                                          |
|  fixed height                                            |
|                                                          |
|----------------------------------------------------------|
|                                                      | s |
| takes all the rest available screen height           | c |
| fluid height, not fixed,                             | r | 
| dependent on the screen height                       | o |
|                                                      | l |   
|                                                      | l |
|                                                      | b |
|                                                      | a |
|                                                      | r |
------------------------------------------------------------

---

使用css和html，而不使用javascript，这是可能的吗？滚动条应该是完全可见的，从上到下。

你可以实现这样的布局，说实话非常简单，只要看看div和一些css就可以了 下面是一个例子：

<div style="width: 604px; height: 405px; border: solid 1px black;">
<div style="width: 100%; height: 100px; border: solid 1px green;"></div>
<div style="width: 100%; height: 74%; border: solid 1px blue;"></div>
</div>

不要忘记宽度：604px只是一个例子，只需将其设置为100%即可使用所有屏幕大小，高度相同

祝你好运

例如：

如果你喜欢答案，别忘了投票参见：（）

HTML:

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

html, body {
    margin: 0;
    padding: 0;
    overflow: hidden
}
#header {
    background: #ccc;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 150px
}
#content {
    background: #eee;
    position: absolute;
    left: 0;
    top: 150px;
    bottom: 0;
    width: 100%;
    overflow-y: scroll
}

---

亲爱的维利，谢谢你的回答。对不起，没有100%清楚。底部窗格应具有灵活的高度，占用所有剩余的屏幕空间。Willi，我指的是底部窗格的高度占用所有剩余的可用屏幕高度。因此，只需设置高度：100%，就像我在刚刚编辑的文章中所做的那样。您的示例不响应以下条件：1。底部窗格的高度应与其他可用屏幕高度完全相同。2.底部窗格内容应该滚动，滚动条应该从上到下完全可见。这是给定问题的正确答案！我必须将其标记为对给定条件绝对正确。对我不利的是，正如我已经阅读了答案一样，我突然想到，我希望顶部窗格的高度不是固定的，而是其大小应该取决于内容。很抱歉没有在条件中提及它-我的不好。我想，如果我们添加这个额外的条件，就不会有纯粹的html/css解决方案。我将用这个附加条件开始一个新问题。请看这里的新问题