固定サイドバー

私は今、私はこのコードの固定バーを持っているので、私はhere in stack overflowを解決し、固定サイドバーをやってる：固定サイドバー

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

それだけに（200pxの高さを持っていますどのように動作するか参照してください）、私が必要とするサイドバーは常に100％の高さを持っていなければなりません。私はstackoverflowでさまざまな記事を見てきましたが、偽のカラムはオプションであると言います：http://www.alistapart.com/articles/fauxcolumns/。しかし、私の中で<div id="sidebar">私はいくつかの場合、2つのDIVs：#menuと#submenuを持っているので、幅は変わります。

どうすればよいですか？私は古いブラウザのサポートは必要ありません。IE9、最新のChrome、最新のFirefoxはOKです。

出典

2011-11-03 udexter

私は本体にborder-leftを追加し、最長のメニュー項目を取得し、幅をemsに一致させてから、サイドメニューにマイナスのマージンを設定します。

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

をテクスチャ背景（1法）と、サイドバーのために、あなたは可能性：（あなたが明示的に設定した場合、またはコンテンツがそれを拡張した場合のいずれか）、コンテンツのdivが占めるどんな高さと一致するように表示されます（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 - 上記の答えに1つの例が追加されました - これを行うにはいくつかの方法がありますが、これは最初のものでした... –

が問題となります列の背景にある種のグラデーションがあることを確認しますか？単色の場合は、2列の幅を設定しないで、背景画像をx軸だけでなくy軸にも並べることはできますか？

出典

2011-11-03 09:52:54 Brighty

はい、テクスチャがついています – udexter

テクスチャイメージ9000ピクセル幅ですが、コンテンツdivをサイドインデックス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

答えて

関連する問題