在CSS 100％高度固定側邊欄

我正在做一個固定的側邊欄，我決here in stack overflow，所以現在我有這個代碼的固定條：在CSS 100％高度固定側邊欄

<div id="main" style="width:100%;background:red;"> 
    <div id="sidemenu" style="float:left;height:200px;background:#000;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:200px;overflow-y:scroll;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

它具有200像素高度（剛看看它是如何工作的），但我需要的邊欄必須始終有100％的高度。我已經在stackoverflow中看到過各種帖子，說人造的列是一個選項：http://www.alistapart.com/articles/fauxcolumns/。但在我的<div id="sidebar">裏面，在某些情況下，還會有2個DIV：#menu和#submenu，因此寬度會有所不同。

我能做些什麼？我不需要支持舊的瀏覽器：IE9，最新的Chrome和最新的Firefox都可以。

來源

2011-11-03 udexter

我會爲身體添加一個border-left，獲取最長的菜單項並將其寬度與ems匹配，然後在側邊菜單中設置負邊距。然後，它會顯示爲等額返還高度內容DIV佔用（或者，如果你將它設置明確的，或者如果內容擴展它）：

<body style="border-left: 10em solid #666;"> 

<div id="main" style="background:red;"> 
    <div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:400px;background:silver;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div> 

</body>

對於帶有紋理背景（一個方法）側邊欄，你可以設置在像素中的寬度相匹配的紋理的寬度（不夠靈活EMS，但如果設定爲最寬的項目，應該沒關係）和沿y軸的紋理重複：

<div id="main" style="background: url(pattern_157.gif) repeat-y;"> 
    <div id="sidemenu" style="float:left;width:200px;background: transparent;"> 
     menu<br /> 
     menu<br /> 
     menu<br /> 
     very long menu item<br /> 
     menu<br /> 
     menu<br /> 
    </div> 
    <div id="content" style="height:600px;background:transparent;"> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
     content <br /> 
    </div> 
</div>

來源

2011-11-03 09:50:31

嘿@Dave！這是一個很好的解決方案，但是......如果sidemenu有背景圖像（紋理）會發生什麼，你將如何解決這個問題？先謝謝你！ – udexter

@udexter - 在上面的答案中增加了一個例子 - 有幾種方法可以做到這一點，但這是第一個想到的...... –

問題是可你的列背景是否有某種漸變？如果它只是純色，那麼您是否可以不留下未設置的2列的寬度，並將背景圖像平鋪在x軸以及y軸上？

來源

2011-11-03 09:52:54 Brighty

是的，它附有紋理 – udexter

如果您製作了紋理圖像9000像素寬，但將內容div放在比sidemenu div更高的z索引處？ – Brighty

這是使用100％固定定位和高度的另一個想法。我還在那裏放了足夠的休息時間來展示內容將如何滾動，但邊欄和內容將保留在原來的位置。

<body style="margin:0;"> 
    <div id="main"> 
     <div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;"> 
      menu<br /> 
      menu<br /> 
      menu<br /> 
      very long menu item<br /> 
      menu<br /> 
      menu<br /> 
     </div> 
     <div id="content" style="background:transparent; float:left; margin:0 0 0 220px;"> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
      content <br /> 
     </div> 
    </div> 
</body>

來源

2012-07-02 15:57:31

在CSS 100％高度固定側邊欄

回答

相關問題