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; 
}

問題は、私はサイドバー（＃ヘッダー）にrightを指定する必要がありますし、サイドバーを意味するだろうそうしなくなった容器を尊重しないだろうということです...

どうすればこの問題を回避できますか？ありがとう

出典

2011-06-23 Cameron

はdiv要素のIDの代わりに言って 'を使用しますあなたはもっと助けになるでしょう。 – daveyfaherty

これを解決したら、CSSでIDを使用しない理由についてGoogleにお伝えください。 :) –

このようなことを意味しますか？ http://jsfiddle.net/NGLN/fDxdj/を参照してください。

ヒント：...サイドバーのヘッダーの名前を変更;）

をしかし、私はそうすることが、サイドバーは、もはやコンテナ

を尊重しないだろう意味でしょう

によってあなたは何を意味するのか理解していません

position: fixedは何も言いません。あなたの現在のサンプルではなく、決してではありません。それは、想定されているようにブラウザウィンドウを尊重するだけです。

出典

2011-06-23 15:54:48 NGLN

'top、left、right or bottom'属性を使用しない場合、固定要素はブラウザウィンドウの代わりにコンテナの内部に配置されます。あなたの例では 'right：0'を使って、コンテナの代わりにブラウザウィンドウの側面に固執させています – Cameron

あなたは要素を固定していると言っていますが、どこにでも固定されていないので、です。しかし、私は右に移動する必要がありますが、それ以外の場合は、私はその問題を得る位置値を使用しない – Cameron

#header { 
    float:right; 
}

これらの巨大なパディングを#maincontentから削除し、必要に応じて#maincontent widthを修正します。

出典

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

答えて

関連する問題