Question

我正在努力应用程序布局。我想用HTML＆amp ;;来实现它。只有CSS，但绝望正在逼近。我需要：

固定高度，100％宽度，静态标题
固定高度，100％宽度，静态页脚
固定宽度内容区域，居中＆amp;完整剩余高度

内容区域需要：

2列，均为全高

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

每列需要：

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

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

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

好吧，看着你的小提琴，告诉你桌子布局是魔鬼。这是我的解决方案。注意：滚动条没有效果，因为你没有提供内容......所以你可能需要愚弄它。

所以这是标记

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

你可能需要稍微玩一下才能让它看起来如你所愿。但是，如果你把它们放在里面，那么布局会与你提供的图片相同。

Answer 2

好的，我有一个工作版本，在IE＆amp; Firefox浏览器。

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

border-box非常有用。

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

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

2 个答案: