CSS聖盃 - 有2個固定/ 1柱流體的問題

好吧，我一直在爲我的網站實施'聖盃'式佈局，到目前爲止它非常接近，但我注意到了兩件事我想修復。CSS聖盃 - 有2個固定/ 1柱流體的問題

目標是一個「粘」頁腳，頁長隨瀏覽器窗口高度，標題和3列而擴展。左側和右側有2個固定柱，中間有一個液柱。

我現在遇到的問題是，我的中心「流體」欄似乎沒有像我預期的那樣。基本上我想要固定的柱子總是被完全展示出來，中間的柱子填充剩下的水平空間。但是中間欄佔據了很多空間，因此我必須滾動才能查看右欄（參見下圖）。此外，「文本對齊：中心」代碼看起來並不是將中心文字置於中間欄的可視區域內。任何幫助感謝！

圖像：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/ – 2013-03-04 05:24:19

無需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 2013-03-04 05:38:09

我這樣做對我的佈局和

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聖盃 - 有2個固定/ 1柱流體的問題

回答

相關問題