如何在没有 javascript 的情况下使用 css 混合固定和百分比高度/宽度答案

【问题标题】：How-to mix fixed and percentage heights/width using css without javascript如何在没有 javascript 的情况下使用 css 混合固定和百分比高度/宽度
【发布时间】：2011-10-07 14:29:06
【问题描述】：

我想实现这样的布局：

 -----------------------------------------------------------
|                                                          |
|  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，可以吗？滚动条应该从上到下完全可见。

【问题讨论】：

标签： html css layout

【解决方案1】：

参见： http://jsfiddle.net/s7FH6/show/ (edit)

HTML：

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

CSS：

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
}

【讨论】：

这是给定问题的正确答案！我必须将其标记为对给定条件绝对正确。
对我不好，就像我已经阅读了答案一样，我突然想到我希望顶部窗格的高度不会固定，而是它的大小应该取决于内容。很抱歉没有在条件中提及它——我的错。我想如果我们添加那个额外的条件 - 将没有纯 html/css 解决方案。我将用这个额外的条件开始一个新问题。
在这里查看新问题stackoverflow.com/questions/6733015/…

【解决方案2】：

你可以实现这样的布局，说实话，只需阅读有关 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>

不要忘记 width: 604px 只是例如将其设置为 100% 以使用所有屏幕尺寸同样适用于高度。

祝你好运。

示例：http://jsfiddle.net/DCbur/2/

如果你喜欢这个答案，别忘了投票

【讨论】：

亲爱的 Villi，感谢您的回答。很抱歉没有 100% 清楚。底部窗格应具有灵活的高度，占用所有剩余的屏幕空间。
Willi，我说的是底部窗格的高度，其余所有可用的屏幕高度。
所以只需设置 height: 100% 就像我在我的帖子中所做的那样只是编辑了它
您的示例不响应以下条件： 1. 底部窗格的高度应完全占据其余所有可用屏幕高度。 2. 底部窗格内容应该可以滚动，并且滚动条应该完全可见，从上到下。