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

Question

我正在为应用程序布局而苦苦挣扎。我想只用 HTML 和 CSS 来实现它，但绝望正在逼近。我需要：

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

内容区需要：

• 2 列，均为全高

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

每列需要：

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

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

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

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

您可能需要稍微尝试一下，让它看起来像您想要的那样。但是在小提琴中，如果您将这些放入其中，它会使布局与您提供的图片相同。