Question

我想实现这样的布局：

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

Answer 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
}

Answer 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>

不要忘记宽度：604px只是例如将其设置为100％以使用与高度相同的所有屏幕尺寸。

祝你好运。

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

如果您喜欢答案，请不要忘记投票

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

2 个答案: