如何混合固定和百分比高度/宽度使用css没有javascript [英] How-to mix fixed and percentage heights/width using css without javascript

问题描述

我想实现这样的布局：

 -----------------------------------------------------------
|                                                          |
|  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 ， 是否可以？

Using css and html, without javascript, is it possible? Scrollbar should be completely visible, from top to bottom.

推荐答案

请参阅：http://jsfiddle.net/s7FH6/show/ （编辑）

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
}

这篇关于如何混合固定和百分比高度/宽度使用css没有javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！