html - 固定页眉、固定页脚、全高多滚动列布局

Question

我正在努力处理应用程序布局。我只想用 HTML 和 CSS 来实现它，但绝望正在逼近。我需要:

• 固定高度、100% 宽度、静态标题
• 固定高度、100% 宽度、静态页脚
• 固定宽度的内容区域，居中且剩余高度

内容区需要:

• 2 列，均为全高

上面的内容相当简单，但可能需要更改以适应下一部分。

每列需要:

• 静态标题
• 静态页脚
• 页眉和页脚之间的可滚动内容区域

我花了一天时间尝试各种方法(甚至是基于--gasp--表的方法)但没有真正成功。

|--------------------------------------------------|
| Fixed height, 100% width, static page header     |
|----|-------------------|--------------------|----|
     |Fixed Col 1 header | Fixed Col 2 header | 
     |-------------------|--------------------|  
     |  Scroll overflow  |  Scroll overflow   |  
     |  Fixed width      |  Fixed width       |  
     |  Full height      |  Full height       |  
     |                   |                    |  
     |                   |                    |  
     |-------------------|--------------------|  
     |Fixed Col 1 footer | Fixed Col 2 footer | 
     |                   |                    |  
|----|-------------------|--------------------|----|
| Fixed height, 100% width, static page footer     |     
|                                                  |            
|--------------------------------------------------|

Answer 1

好的，我有一个工作版本，在 IE 和 Firefox 中测试过。

http://jsfiddle.net/vna48w5w/3/

border-box 很有帮助。

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;