CSS固定側邊欄

下面的HTML創建一個簡單的佈局與固定側邊欄，但我希望把側邊欄上的內容CSS固定側邊欄

的HTML的右側：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <link rel="stylesheet" href="master.css" type="text/css" /> 
    </head> 
    <body> 

     <div id="container"> 

      <header id="header"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
       Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </header> 

      <div id="maincontent"> 
       <div style="height:1280px;background:#333;"></div> 
      </div> 

      <div style="height:100px;"></div> 

     </div> 

    </body> 
</html>

和CSS：

#container 
{ 
    width: 1140px; 
    max-width: 98%; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    min-height: 100%; 
} 
#header 
{ 
    position: fixed; 
    z-index: 20; 
    width: 180px; 
    padding-top: 100px; 
    text-align: right; 
} 
#maincontent 
{ 
    padding-left: 220px; 
    padding-top: 100px; 
}

的問題是，我需要指定側欄上的（的#header）的right，這樣做將意味着側邊欄將不再兌現容器...

任何想法如何解決這個問題？謝謝

來源

2011-06-23 Cameron

使用div的ID，而不是說'的側欄'，你會得到更多的幫助。 – daveyfaherty

一旦你解決了這個問題，請Google做一個關於不應該在CSS中使用ID的原因。 :) –

你的意思是這樣的嗎？見http://jsfiddle.net/NGLN/fDxdj/。

提示：重命名頭側邊欄...;）

但我不明白你的

意味着這樣做將意味着側邊欄將不再兌現容器

什麼

因爲position: fixed不兌現任何東西。不在你目前的樣本中，從來不是。它只尊重瀏覽器窗口，就像它應該的那樣。

來源

2011-06-23 15:54:48 NGLN

如果您不使用'top，left，right，or bottom'屬性，那麼固定元素將自己定位在容器內而不是瀏覽器窗口。在你的例子中，通過使用'right：0'，你已經使它堅持在瀏覽器窗口的一側，而不是容器 – Cameron

Yeh，因爲你告訴元素是固定的，但沒有固定在任何點，所以它只是停留在它的位置是。但我需要移動到右側，但不使用任何位置值，否則我得到這個問題 – Cameron

#header { 
    float:right; 
}

從#maincontent中刪除那些巨大的填充，並在必要時修復#maincontent寬度。

來源

2011-06-23 15:55:51

這不會使頭固定雖然 – Cameron

我剛剛找到的這個技巧就是將您想要顯示的項目放在右側（標題），您希望它顯示出來。所以漂浮在那裏。

然後添加一個固定的內部容器。

全部工作示例：http://jsfiddle.net/jupitercow/MjPC4/

所以，我更新了你的頭CSS是這樣的：

#header 
{ 
    float: right; 
    z-index: 20; 
    width: 180px; 
    padding-top: 100px; 
    text-align: right; 
} 
#header .inner { 
    position: fixed; 
    width: 180px; 
}

和HTML：

<header id="header"> 
    <div class="inner"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    </div> 
</header>

來源

2013-08-27 15:54:38 Jake

CSS固定側邊欄

回答

相關問題