Naprawiono przewijaną wysokość div wewnątrz kolumny bootstrap 3

Question

Widziałem podobne pytania, ale nic dokładnie takiego, jak próbuję. Większość przykładów tworzy cały zwój col-md-2, potrzebuję w nim zawartości do przewijania.

Wewnątrz pojemnika na płyn, mam lewą kolumnę typu nawigacji i kolumnę z prawą zawartością.

Wewnątrz lewej kolumny Chcę div w najwyższej klasie = "top", a div w dolnej klasie = "na dole". A w środku mam listę. Załóżmy, że u dołu i na górze znajduje się 100 pikseli. Chcę, aby lista zajmowała całą przestrzeń między nimi, a jeśli zawartość listy jest większa niż ten obszar, chcę ją przewinąć. Jeśli zawartość listy jest mniejsza niż przestrzeń między nimi, chcę, aby zajęła całą tę przestrzeń (nie zwiń).

Oto psuedo przykład:

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 

      <div class="top"> 
       . . . 
      </div> 

      <div class="scroll-area"> 
       <ul> 
        <li>one</li> 
        . . . 
        <li>one-thousand</li> 
       </ul> 
      </div> 

      <div class="bottom"> 
       . . . 
      </div> 

     </div> 
     <div class="col-md-10 content"> 
     </div> 
    </div> 
    </div> 

    <style> 
    .top, .bottom { height: 100px; } 
    </style> 

udało mi się to zrobić przed bez bootstrap dając "scroll-area" pozycjonowanie bezwzględne. Mogę uczynić pracę scroll-kierunkowy z pozycjonowanie stałe, ale zawierające „col-MD-2 jest zwinięty, więc«z dołu»siada szczyt.

Jak mogę dokonać tej pracy?

Answer 1

Ta odpowiedź jest, gdy nie wiesz, wysokość okna.

Możesz to osiągnąć używając pozycji: absolutna; po prostu mówisz niebieskim i czerwonym częściom, aby górny i dolny, zielony element powinien mieć top 100px, a następnie po prostu użyj css "calc", aby uzyskać jego wysokość.

Style

.side{ 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    padding:0; 
} 

.scroll-area{ 
    width:100%; 
    height:calc(100% - 200px); 
    margin-top:100px; 
    background-color:green; 
    float:left; 
    overflow-y:scroll; 
} 

html

<div class="row"> 
     <div class="col-md-2 col-xs-2 side"> 
      <div style="position:relative;width:100%;height:100%;"> 
      <div class="top" style="background-color:red;top:0;width:100%;height: 100px; position:absolute;"> 
       top 
      </div> 

      <div class="scroll-area"> 
       <ul> 
        <li>one</li> 
       </ul> 
       <div style="width:100%;height:10000px;"> 
       </div> 
       <ul> 
        <li>one-thousand</li> 
       </ul> 
      </div> 

      <div class="bottom" style="background-color:blue;bottom:0;width:100%;height: 100px; position:absolute;"> 
       bottom 
      </div> 
      </div> 

     </div> 
     <div class="col-md-10 col-xs-offset-2 content col-md-offset-2"> 
     <div style="height:1000px;width:100%;"> 

     </div> 
     </div> 
    </div> 

przyjrzeć się tej filddle -

https://jsfiddle.net/jxo6pmju/12/

Answer 2

Tutaj dodałem odnośnik skrzypce za to, co miał problemy z. Nadzieja to helps`

<div class="fixed"> 
    <b>Fixed Content</b> 
    <br/> 
    <br/> 
    <p>top</p> 
</div> 
<div class="scrollit"> 
    <b>Scroll Content</b> 
    <br/> 
    <br/> 
    <ul> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    <li>item</li> 
    </ul> 


</div> 
<div class="fixed"> 
    <b>Fixed Content</b> 
    <br/> 
    <br/> bottom 
</div> 

scrollable middle section