CSS holy grail - 2つの固定/ 1流体列の問題

私のウェブサイトには「聖杯」スタイルのレイアウトを実装しようとしていましたが、これまでのところかなり近かったですが、CSS holy grail - 2つの固定/ 1流体列の問題

目標は、ページ長がブラウザウィンドウの高さ、ヘッダー、および3列に拡大された「固定」フッターです。左右に2本の固定柱、中央に流体柱があります。

私が抱えている問題は、今のところ、私のセンターの「液体」カラムは、私が予想していたように動作していないようです。基本的には、固定された列を常に完全に表示し、中央の列は残りの水平方向のスペースを埋めるようにします。しかし、中央のコラムはたくさんの部屋を占めており、右の列を見るためにスクロールする必要があります（下の画像を参照）。また、 'text-align：center'コードは、中央の列の可視領域内にテキストをセンタリングしているようには見えません。どんな助けにも感謝！

画像：http://i.imgur.com/FPuSiIu.png

HTML：

<html> 
    <head> 
     <link type="text/css" rel="stylesheet" href="test.css" /> 
    </head> 
    <body> 
     <div id="header"> 
      <p>Header</p> 
     </div> 
     <div id="container"> 
      <div id="center"> 
       <p>Content</p> 
      </div> 
      <div id="left"> 
       <p>Content</p> 
      </div> 
      <div id="right"> 
       <p>Content</p> 
      </div> 
     </div> 
     <div id="footer"> 
      <p>Footer</p> 
     </div> 

    </body> 
</html>

CSS：

* { 
    margin: 0; 
} 

#container { 
    width:100%; 
} 

#header { 
    text-align: center; 
    background: #5D7B93; 
    height: 95px; 
    padding: 5px; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 15; 
} 
#center{ 
    text-align: center; 
    margin-top: 105px; 
    background: red; 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 100%; 
} 
#left { 

    height: 100%; 
    width: 150px; 
    text-align:center; 
    background:#EAEAEA; 
    margin-top: 105px; 
    margin-left: -100%; 
    overflow: scroll; 
    position: relative; 
    float: left; 
} 

#right { 
    position: relative; 
    height: 100%; 
    width: 150px; 
    margin-right: -100%; 
    margin-top: 105px; 
    background: blue; 
    text-align: center; 
    float: left; 
} 
#footer { 
    text-align:center; 
    background: #5D7B93; 
    height:25px; 
    padding:5px; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
}

出典

2013-03-04 Caleb

私のために正常に動作します。http：/ /jsfiddle.net/ExplosionPIlls/ANZct/ –

floatする必要はありません。ちょうどposition: absoluteのサイドバーと両側にセンターdivの固定マージンを与えます。

JSFiddle

CSS

#container{ 
    position: relative; 
} 

#left, #right { 
    width: 200px; 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 

#left { 
    left: 0; 
} 

#right { 
    right: 0; 
} 

#center { 
    margin: 0 200px; 
}

出典

2013-03-04 05:30:11 thgaskell

@Caleb：可能であれば、私はこの実装に行きます – Jace

私は私のレイアウト上でこれをやった、それは私がポジショニングを使用して別のルートを行ってきました

body, 
html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

#container{ 
    display: inline-flex; 
    width: 100%; 
    height: 100%; 
    background: lightblue; 
} 

#left { 
    width: 240px!important; 
    min-width: 240px!important; 
    background: red; 
    height: 100%; 
} 

#right { 
    width: 400px!important; 
    min-width: 400px!important; 
    background: red; 
    height: 100%; 
} 

#center { 
    background: blue; 
    width: 100%; 
    min-width: 600px; 
    height: 100%; 
}

出典

2014-03-17 18:53:04 flaalf

CSS holy grail - 2つの固定/ 1流体列の問題

答えて

関連する問題