我正在纠结于应用程序的布局。我只想用HTML&CSS来实现它，但绝望正在逼近。我需要：
内容区域需要：
上面的内容相当简单，但可能需要更改以适应下一部分。
每一列都需要：
我花了一天的时间尝试各种方法（甚至是基于--喘息--表的方法），但没有真正成功。
|--------------------------------------------------|
| 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 |
| |
|--------------------------------------------------|
好吧，看看你的小提琴，告诉你桌子的布局是魔鬼。这是我的解决方案。注意：滚动无法工作，因为您没有提供内容...所以你可能需要胡闹一下。
下面是标记
<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;
}
你可能需要玩它一点，使它看起来像你想要的。但在小提琴，如果你把这些放进去，它会使布局与你提供的图片相同。
好的，我有一个工作版本，在IE和Firefox测试。
http://jsfidle.net/vna48w5w/3/
边框很有帮助。
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
