2

フルスクリーンの 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必要です) と (常に画面の下部にある必要があります) にあります。

4

2 に答える 2

4

calc()この機能を使えば簡単に実現できますが、IE 9 より前ではサポートされておらず、モバイル サポートもかなり貧弱です。必要なのは#divCenter、100% から兄弟の高さの 20px + 20px を差し引いた高さを与えることだけです。フッターを下部に表示するには、それを含むブロックを相対的に配置してから、フッターを絶対的に配置して下部に配置する必要があります ( bottom: 0;)。

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

于 2013-06-03T04:45:54.577 に答える
3

と の高さが固定されていると仮定する#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;
}

ライブデモ

于 2013-06-03T04:47:00.103 に答える