具有固定橫條和滾動內容的2列固定流體佈局

通過瀏覽本網站和其他網站，我還沒有找到針對此特定問題的解決方案。我想實現可以觀看下面的例子（也位於下方）後得到最好的說明： http://jsfiddle.net/yev8/HRQB5/具有固定橫條和滾動內容的2列固定流體佈局

目前狀況：在這個例子中我有一個左列（固定寬度）和右柱（液體寬度）。在右欄中有四個欄。對齊頂部的兩個條在每個頁面上都是相同的。對齊到底部的兩個條在每個頁面上都是不同的，這兩者的每個組合都是可能的。現在在中間我有一個div，「內容」，它填充了可用空間，如有必要，還有一個垂直滾動條。

我想實現的：我想要div的滾動條替換爲一個垂直覆蓋整個頁面的滾動條，就像默認的滾動條一樣。滾動時，左側菜單和所有酒吧不應改變其位置。滾動的唯一東西應該是中間內容div。

我不知道這是否可能，但在理想的情況下，我想只用CSS來解決這個問題。如果這是不可能的，JavaScript（帶或不帶jQuery）將工作。

任何人都可以給我任何建議或指向正確的方向嗎？我似乎無法按我想要的方式工作。

我目前的HTML：

<!doctype html> 
<html lang="nl"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
     <title></title> 
     <link href="css/stylesheet.css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 
     <div id="wrapper"> 
      <div id="left"> 
       <ul> 
        <li><a href="#" title="">Menu item</a></li> 
        <li><a href="#" title="">Menu item</a></li> 
        <li><a href="#" title="">Menu item</a></li> 
       </ul> 
      </div> 
      <div id="right"> 
       <div id="bar-1">bar-1</div> 
       <div id="bar-2">bar-2</div> 
       <div id="content"> 
        <div style="height:400px;background-color:#ff0;"></div> 
        <div style="height:400px;background-color:#f0f;"></div> 
        <div style="height:400px;background-color:#0f0;"></div> 
        <div style="height:400px;background-color:#00f;"></div> 
       </div> 
       <div id="bar-3">bar-3</div> 
       <div id="bar-4">bar-4</div> 
      </div> 
     </div> 
    </body> 
</html>

我現在的CSS：

html, body { 
    height: 100%; 
    background-color: #fff; 
    color: #2f2f2f; 
    overflow: hidden; 
    padding: 0; 
    margin: 0; 
    border: 0; 
    outline: 0; 
} 

div#wrapper { 
    height: 100%; 
    margin: auto; 
    position: relative; 
} 

div#left { 
    height: 100%; 
    float: left; 
    width: 256px; 
    overflow-y: auto; 
    background-color: #fcfcfc; 
} 

div#right { 
    height: 100%; 
    position: relative; 
    margin-left: 256px; 
} 

    div#right div#bar-1 { 
     overflow: hidden; 
     position: absolute; 
     left: 0; 
     right: 0; 
     height: 64px; 
     top: 0; 
     background-color: #eaeaea; 
    } 

    div#right div#bar-2 { 
     overflow: hidden; 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 64px; 
     height: 32px; 
     background-color: #979797; 
    } 

    div#right div#content { 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 96px; 
     bottom: 224px; 
     overflow-y: scroll; 
    } 

    div#right div#bar-3 { 
     overflow: hidden; 
     position: absolute; 
     left: 0; 
     right: 0; 
     bottom: 128px; 
     height: 96px; 
     background-color: #eaeaea; 
    } 

    div#right div#bar-4 { 
     overflow: hidden; 
     position: absolute; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     height: 128px; 
     background-color: #d5d5d5; 
    }

來源

2012-12-13 ev8

你的意思是這樣的：http://jsfiddle.net/Y2spp/2/

我添加填充到內容的頂部和底部的根據其他酒吧。確保內容的高度爲100％，並且豎條位於內容的頂部。

只有CSS的變化：

div#right div#bar-1 { 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    right: 17px; 
    height: 64px; 
    z-index:4; 
    top: 0; 
    background-color: #eaeaea; 
} 

div#right div#bar-2 { 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    right: 17px; 
    top: 64px; 
    z-index:4; 
    height: 32px; 
    background-color: #979797; 
} 

div#right div#content { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0px; 
    bottom: 0px; 
    padding-top:96px; 
    padding-bottom:224px; 
    overflow-y: scroll; 
    z-index:2; 
} 

div#right div#bar-3 { 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    right: 17px; 
z-index:4; 
    bottom: 128px; 
    height: 96px; 
    background-color: #eaeaea; 
} 

div#right div#bar-4 { 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    right: 17px; 
    z-index:4; 
    bottom: 0; 
    height: 128px; 
    background-color: #d5d5d5; 
}

來源

2012-12-13 16:05:53 Timmetje

感謝您的回覆Timmied。好想法。頂部填充似乎工作，但底部填充不能。我現在只能看到內容div中的藍色條的一半，這意味着內容div中的內容現在部分位於底部條的後面。 – ev8

我現在（暫時）在內容div中放置一個內容填充div，高度爲224px，以填充我需要的空間。我寧願有一個沒有這個解決方案，因爲每個頁面的底部欄是不同的，所以如果有人知道這個方法，請分享。 :) – ev8

您可能需要爲此使用JS。 Padding-bottom在小提琴中工作，不是嗎？ – Timmetje

具有固定橫條和滾動內容的2列固定流體佈局

回答

相關問題