Bootstrap: Fixed linken nav aber scrollbar

Ich habe eine linke nav und überlaufen die Seite bereits.
Was ich tun möchte, ist das Nav wird nicht in der Lage zu überlaufen, aber es kann Scroll sein und mein Inhalt <div> wird nicht betroffen sein.
Aber ich möchte nicht iframe verwenden.
Ist es möglich zu tun?
Bootstrap: Fixed linken nav aber scrollbar

Das ist mein bootply code link
Ähnliche mit diesem Beispiel, aber ich möchte die "Seite" nav scroll auch sein kann (wenn man es kleiner werden die Größe)

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

Quelle

2016-03-31 Ying Rui Wong

In der CSS, setzen Sie den Überlauf auf der Y-Achse scrollen?

#sidebar{overflow-y:scroll}

oder es auf auto gesetzt, wenn Sie nicht die Bildlaufleiste die ganze Zeit wollen präsentieren

#sidebar{overflow-y:auto}

Quelle

2016-03-31 09:44:07 gavgrif

Dank! aber nicht für mich arbeiten. –

anderen Weg, es zu tun ist, zwei divs zu haben - mit unterschiedlichen Überlaufeinstellungen wie so:

Platzieren Sie die Seitenleiste in einem übergeordneten div. Legen Sie das übergeordnete div zu Überlauf ausgeblendet und das innere div automatisch überlaufen. Machen Sie das übergeordnete div etwas dünner als das innere div, sodass die Bildlaufleiste vom inneren div nicht angezeigt wird. Wenn sie dynamisch erstellt wird, legen Sie einfach die Breite zum Zeitpunkt des Renderns mit jQuery oder anderen js fest. Beachten Sie, dass es sich bei dem folgenden Beispiel um eine Demo handelt, die sich nicht auf Ihre Größe/Seitenleiste usw. bezieht - nur um zu zeigen, dass Sie ein scrollbares div ohne Scrollbalken haben können.

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

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

ps: - ich habe nur dies zusammen um den Effekt zu zeigen. Beachten Sie, dass die Breite in der CSS für beide Divs festgelegt wird. Der Effekt als solcher erfordert weder JS noch JQuery, jedoch wird das Festlegen von Stilregeln dynamisch erfolgen. Oder benutze PHP und lade die Breiten beim Laden/Rendern der Seite. Sie sollten investgate "calc" für die CSS, aber ich weiß nicht, wie gut das in verschiedenen Browsern unterstützt wird. Alternativ - verwenden Sie Prozentsätze für die CSS, machen Sie einfach die Eltern div Skinner als die Nner div.

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

Quelle

2016-03-31 09:48:29 gavgrif

err..sorry funktioniert nicht für mich –

hi, ich habe gerade den parentDiv Überlauf geändert: zum Überlauf ausgeblendet: scroll, es funktioniert. Vielen Dank –

Bootstrap: Fixed linken nav aber scrollbar

Antwort

Verwandte Themen