固定页眉、固定页脚、全高多个可滚动列布局

Question

我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它，但绝望正在逼近。我需要：

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

内容区域需要：

• 两列，均为全高

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

每一列都需要：

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

我花了一天的时间尝试各种方法（甚至是基于--喘息--表的方法），但没有真正成功。

|--------------------------------------------------|
| 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://jsfidle.net/vna48w5w/3/

边框很有帮助。

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

Answer 2

好吧，看看你的小提琴，告诉你桌子的布局是魔鬼。这是我的解决方案。注意：滚动无法工作，因为您没有提供内容...所以你可能需要胡闹一下。

下面是标记

<header>
   header
</header>
<main>
 <div class="col1">
     <header>header</header>
     <div class="foo">
         some junk
     </div>
     <footer>footer</footer>
</div>
<div class="col2">
    <header>header</header>
    <div class="foo">
        more junk
    </div>
    <footer>footer</footer>
</div>
</main>
<footer>
   footer
</footer>

这是款式

body{
    height:100%;
}
header, footer{
width:100%;
height:50px;
background-color:pink;
}
main{
margin:0 auto;
height:100vh;
background-color:blue;
}
.col1, .col2 {
width:50%;
float:left;
}


.col1{
background-color:red;
height:100%;
}
.col2{
background-color:green;
height:100%;
}
.col1 header, .col1 footer {
     background-color:purple;
}
 .col2 header, .col2 footer {
 background-color:yellow;
 }
 .col1 footer{
 position:relative;
 }
 .foo{
 width:100%;
 height:82%;
 overflow:scroll;
 }

你可能需要玩它一点，使它看起来像你想要的。但在小提琴，如果你把这些放进去，它会使布局与你提供的图片相同。