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

这是jsfiddle

所以，问题在于#divCenter（应该有液体高度）和#divBottom（应该总是在屏幕的底部）。

Answer 1

您可以使用该功能轻松实现这一点，尽管IE 9 以下calc()不支持它并且移动支持非常糟糕。你需要做的就是给出一个 100% 的高度减去它的兄弟的 20px + 20px 的高度。要让页脚出现在底部，您需要相对定位其包含块，然后绝对定位页脚并将其放置在底部 ( )。#divCenterbottom: 0;

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

Answer 2

假设#divTop并且#divBottom具有固定的高度，您可以这样做：

#divRight{
   position: relative;
}

#divCenter{
   position: absolute;
   top: (height of #divTop)
   bottom: (height of #divBottom)
   left:0;
   right:0;

}
#divBottom{
  position: absolute;
  left:0;
  bottom:0;
  right:0;
} 

现场演示