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％的高度减去其兄弟姐妹身高20px + 20px的高度。要使页脚显示在底部，您需要相对定位其包含块，然后绝对定位页脚并将其放在底部（bottom: 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;
}

LIVE DEMO

全屏css布局

2 个答案: