css - 全屏CSS布局

Question

我想创建一个全屏 CSS 布局。

<div id="divLeft">LEFT is ok</div>
<div id="divRight">
    <div id="divTop">TOP is ok</div>
    <div id="divCenter">CENTER should have liquid height</div>
    <div id="divBottom">BOTTOM should be always bottom</div>
</div>

CSS

html{
     height:100%
}
body{
    height:100%
}
#divLeft{
    float:left;
    width:70px;
    height:100%;
    background:#6c9;
}
#divRight{
   margin-left:70px;
    height:100%;
    background:#999;
    color:#fff;
}
#divTop{
     background:red;
     text-align:right;
}
#divCenter{
      background:blue;
      text-align:center;
}
#divBottom{
  background:green;
  text-align:center;
}  

Here is jsfiddle

因此，问题出在 #divCenter(应具有液体高度)和 #divBottom(应始终位于屏幕底部)。

Answer 1

您可以使用 calc() 轻松实现此目的功能，虽然它不是supported below IE 9和移动支持是相当糟糕的。您需要做的就是给 #divCenter 一个 100% 的高度减去其 sibling 的 20px + 20px 高度。要让页脚出现在底部，您需要相对定位其包含 block ，然后绝对定位页脚并将其放在底部(bottom: 0;)。

http://jsfiddle.net/gpwD4/6/