Hinzufügen von 2 festen Navbar an verschiedenen Positionen

Question

Das Problem, das ich bekomme, ist, dass ich möchte die zweite Navbar mit der Klasse navbar2 auch in der div class="col-xs-10" itself behoben werden, so dass der Inhalt darunter leicht gescrollt werden kann, ohne die Navbar 2 zu bewegen. Das andere Problem ist, dass, wenn die navbar2 fest ist, die Breite nicht auf verschiedenen Bildschirmgrößen beibehalten werden kann. Der Arbeitscode ist hier https://jsfiddle.net/0sqk00Lw/4/ .. Kann jemand .. Vielen Dank im Voraus

helfen

<nav class="navbar navbar-default navbar-fixed-top navbar1"> 
<div class="container"> 
    NAVBAR FIXED TOP 
</div> 
</nav> 
<div class="row"> 
<div class="col-xs-2" style="background-color:blue"> 
    hello 
</div> 

<div class="col-xs-10"> 
    <nav class="navbar navbar-default navbar-static-top navbar2"> 
     <div class="container"> 
      NAVBAR FIXED TOP 
     </div> 
    </nav> 
    <p> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    hello<br> 
    </p> 
</div> 

Answer 1

Werfen Sie einen Blick auf diese Geige. https://jsfiddle.net/h7fjtbhz/

Alle Elemente auf 100% Breite und berechnete Höhe für den p-Tag

height:calc(100% - 100px); // change 100px to height of remaining elements above the second navbar 

Sag mir geändert, wenn etwas geändert werden muss.

Answer 2

.navbar2{ 
    position:relative; 
    width:100%; 
    background-color:#fed136; 
} 

wenn Sie Position relativ eingestellt es nicht behoben werden kann. es braucht Position: fest eingestellt werden. und dann müssen Sie es in Bezug auf das Ansichtsfenster (nicht das Elternelement) positionieren