ブートストラップ：左ナビを固定しましたが、スクロールすることができます

左のナビゲーションがあり、すでにページがオーバーフローしています。
何をしたいのですか？navはオーバーフローすることはできませんが、スクロールすることができ、コンテンツ<div>は影響を受けません。
しかし、私はiframeを使いたくありません。
できますか？
ブートストラップ：左ナビを固定しましたが、スクロールすることができます

これは、この例と同様に、私のbootply code link
ですが、私は（あなたはそれが小さくなってリサイズする場合）、 "サイド" NAVも

<script type="text/javascript"> 
$(function(){ 
    $('#sidebar').affix({ 
    offset: { 
    top: $('header').outerHeight(true), 
    bottom: $('footer').outerHeight(true) 
    } 
    }); 
</script>

<nav class="navbar navbar-default" role="navigation" > 
    <ul class="nav nav-stacked" id="sidebar" > 
    <?php 
     $groupInfo = $_SESSION['base_u_ldapGroup']; 
     // print_r($groupInfo); 
     base_generateMenuBar($groupInfo) 
    ?> 
    </ul> 
</nav>

をスクロールすることができますしたいです

出典

2016-03-31 Ying Rui Wong

CSSでは、y軸をスクロールするようにオーバーフローを設定しますか？

#sidebar{overflow-y:scroll}

または自動に設定しますが、スクロールバーが存在しない場合

#sidebar{overflow-y:auto}

出典

2016-03-31 09:44:07 gavgrif

ありがとう！私にとってはうまくいかない。 –

すべての時間はそれを行うための別の方法は、二つのdivを持つことである - ように異なるオーバーフロー設定で：

サイドバーを親divに配置します。親divをoverflowに、inner divをoverflow autoに設定します。親divを内側のdivよりも少しスキンにして、内側のdivのスクロールバーが表示されないようにします。動的に作成された場合は、jQueryなどのjsを使用してレンダリング時の幅を設定するだけです。以下はデモであり、サイジング/サイドバーなどとは関係ないことに注意してください。スクロールバーなしでスクロール可能なdivを持つことができることを示すだけです。

.parentDiv 
    { 
     width: 301px; 
     height: 450px; 
     overflow: hidden; 
    } 

.parentDiv .innerDiv 
    { 
     width: 320px; 
     height: 450px; 
     overflow: auto; 
    }

ps： - ちょうどこれをまとめて効果を示します。両方のdivのCSSの幅を設定することに注意してください。そのような効果はJSやJQueryを必要とせず、スタイルルールを動的に設定します。または、PHPを使用し、ページの読み込み/レンダリング時に幅を読み込みます。あなたはcssのために "calc"を投資していますが、私はそれがどのブラウザでサポートされているかは分かりません。あるいは、CSSのパーセンテージを使用して、nner divよりも親div skinnerを作成します。

<!DOCTYPE html> 
 
    <html lang="en-US"> 
 
    <head> 
 
    <title>Scrollable Div Test</title> 
 
    <meta charset="UTF-8" /> 
 
     <style> 
 
    \t .parentDiv 
 
     {; 
 
      width: 301px; 
 
      height: 450px; 
 
      overflow: hidden; 
 
     } 
 
    
 
    .parentDiv .innerDiv 
 
     { 
 
      width: 320px; 
 
      height: 450px; 
 
      overflow: auto; 
 
     } 
 
    
 
     </style> 
 
    </head> 
 
    
 
    <body> 
 
    
 
    <div class="parentDiv"/> 
 
    \t <div class="innerDiv"/> 
 
    <p>scroll this list<p> 
 
    \t \t <ul> 
 
    \t \t \t <li>a</li> 
 
    \t \t \t <li>b</li> 
 
    \t \t \t <li>c</li> 
 
    \t \t \t <li>d</li> 
 
    \t \t \t <li>e</li> 
 
    \t \t \t <li>f</li> 
 
    \t \t \t <li>g</li> 
 
    \t \t \t <li>h</li> 
 
    \t \t \t <li>i</li> 
 
    \t \t \t <li>j</li> 
 
    \t \t \t <li>k</li> 
 
    \t \t \t <li>l</li> 
 
    \t \t \t <li>m</li> 
 
    \t \t \t <li>n</li> 
 
    \t \t \t <li>o</li> 
 
    \t \t \t <li>p</li> 
 
    \t \t \t <li>q</li> 
 
    \t \t \t <li>r</li> 
 
    \t \t \t <li>s</li> 
 
    \t \t \t <li>t</li> 
 
    \t \t \t <li>u</li> 
 
    \t \t \t <li>v</li> 
 
    \t \t \t <li>w</li> 
 
    \t \t \t <li>x</li> 
 
    \t \t \t <li>y</li> 
 
    \t \t \t <li>z</li> 
 
    \t \t </ul> 
 
    \t </div> 
 
    </div> 
 
    </body> 
 
    </html>

出典

2016-03-31 09:48:29 gavgrif

err..sorryは私のために働いていません –

こんにちは、私はparentDivオーバーフローを変更しました：オーバーフローに隠された：スクロール、それは動作します。ありがとう –

ブートストラップ：左ナビを固定しましたが、スクロールすることができます

答えて

関連する問題