Jak sprawić, by zawartość stałego elementu była przewijalna tylko wtedy, gdy przekracza wysokość widoku?

Mam divpozycję fixedpo lewej stronie strony internetowej, zawierającą menu i linki nawigacyjne. Nie ma ustawionej wysokości z css, zawartość określa wysokość, szerokość jest stała. Problem polega na tym, że jeśli zawartości jest za dużo, divbędzie ona większa niż wysokość okna, a część zawartości nie będzie widoczna. (Przewijanie okna nie pomaga, ponieważ pozycja jest fixedi divnie można przewijać).

Próbowałem ustawić, overflow-y:auto;ale to też nie pomaga, element div zdaje się nie zauważać, że jego część znajduje się poza oknem.

Jak mogę sprawić, by jego zawartość przewijała się tylko w razie potrzeby, jeśli divwisi za oknem?

Prawdopodobnie nie możesz. Oto coś, co się zbliża. Nie dostaniesz zawartości opływającej go, jeśli jest miejsce poniżej.

http://jsfiddle.net/ThnLk/1289

.stuck {
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 180px;
    overflow-y: scroll;
}

Możesz również zrobić wysokość procentową:

http://jsfiddle.net/ThnLk/1287/

.stuck {
    max-height: 100%;
}

Poniższy link pokaże, jak to osiągnąłem. Niezbyt trudne - po prostu trzeba użyć sprytnego programisty front-end !!

<div style="position: fixed; bottom: 0%; top: 0%;">

    <div style="overflow-y: scroll; height: 100%;">

       Menu HTML goes in here

    </div>

</div>

http://jsfiddle.net/RyanBrackett/b44Zn/

Spróbuj tego na swojej pozycji: element stały.

overflow-y: scroll;
max-height: 100%;

Prawdopodobnie potrzebujesz wewnętrznego div. Z css jest:

.fixed {
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   overflow-y: auto;
   width: 200px; // your value
}
.inner {
   min-height: 100%;
}

Jest to absolutnie wykonalne z pewną magią flexbox. Spójrz na ten długopis .

Potrzebujesz CSS w ten sposób:

aside {
  background-color: cyan;
  position: fixed;
  max-height: 100vh;
  width: 25%;
  display: flex;
  flex-direction: column;
}

ul {
  overflow-y: scroll;
}

section {
  width: 75%;
  float: right;
  background: orange;
}

To zadziała w IE10 +

Oto czyste rozwiązanie HTML i CSS .

1. Tworzymy pojemnik na pasek nawigacyjny z pozycją: ustalona; wysokość: 100%;

2. Następnie tworzymy wewnętrzne pudełko o wysokości: 100%; overflow-y: scroll;

3. Następnie umieściliśmy zawartość w tym pudełku.

Oto kod:

.nav-box{
        position: fixed;
        border: 1px solid #0a2b1d;
        height:100%;
   }
   .inner-box{
        width: 200px;
        height: 100%;
        overflow-y: scroll;
        border: 1px solid #0A246A;
    }
    .tabs{
        border: 3px solid chartreuse;
        color:darkred;
    }
    .content-box p{
      height:50px;
      text-align:center;
    }

<div class="nav-box">
  <div class="inner-box">
    <div class="tabs"><p>Navbar content Start</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content</p></div>
    <div class="tabs"><p>Navbar content End</p></div>
    </div>
</div>
<div class="content-box">
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
</div>

Link do jsFiddle:

Przedstawiam to raczej jako obejście niż rozwiązanie. To może nie działać przez cały czas. Zrobiłem to w ten sposób, ponieważ tworzę bardzo prostą stronę HTML, do użytku wewnętrznego, w bardzo dziwacznym środowisku. Wiem, że są biblioteki takie jak MaterializeCSS, które potrafią robić naprawdę ładne paski nawigacyjne. (Chciałem ich użyć, ale nie działało to w moim środowisku).

<div id="nav" style="position:fixed;float:left;overflow-y:hidden;width:10%;"></div>
<div style="margin-left:10%;float:left;overflow-y:auto;width:60%;word-break:break-all;word-wrap:break-word;" id="content"></div>

Dodaj to do swojego kodu, aby uzyskać stałą wysokość i dodaj jeden zwój.

.fixedbox {
    max-height: auto;
    overflow-y: scroll;
}

Do swojego celu możesz po prostu użyć

position: absolute;
top: 0%;

i nadal będzie skalowalny, przewijalny i responsywny.