Fixed position div scrollable

Mam div umieszczony fixed po lewej stronie strony internetowej, zawierający linki do menu i nawigacji. Nie ma ustawionej wysokości z css, zawartość określa wysokość, szerokość jest stała. Problem polega na tym, że jeśli zawartość jest zbyt duża, div będzie większa niż wysokość okna, a część zawartości nie będzie widoczna. (Przewijanie okna nie pomaga, ponieważ pozycja to fixed, A div nie będzie przewijać.)

Próbowałem ustawić overflow-y:auto; ale to też nie pomaga, div wydaje się nie zauważyć, że część jest za oknem.

Jak mogę sprawić, aby zawartość była przewijalna tylko, jeśli jest to konieczne, jeśli div wisi za oknem?

Author: Mkoch, 2013-09-19
Source

8 answers

Prawdopodobnie nie możesz. Zawartość nie będzie przepływać wokół niej, 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;
}

Update: możesz również wykonać procentową wysokość:

Http://jsfiddle.net/ThnLk/1287/ 

.stuck {
    max-height: 100%;
}
 60
Author: isherwood,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-09 14:52:47

Poniższy link pokaże, jak to zrobiłem. Nie bardzo trudne - wystarczy użyć jakiegoś sprytnego front-endu dev!!

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

 21
Author: Ryan Brackett,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-06 17:48:24

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%;
}
 6
Author: Aureliano Far Suau,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-19 13:26:54

Jest to absolutnie wykonalne z 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 +

 2
Author: transGLUKator,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-10-23 07:58:23

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

overflow-y: scroll;
max-height: 100%;
 1
Author: Lucas Bustamante,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-06 19:12:46

Oto czyste rozwiązanie HTML i CSS .

  1. Tworzymy kontener dla navbara z pozycja: stała; wysokość:100%;

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

  3. Następnie umieszczamy 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:

 1
Author: Manoj Negi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-01 11:53:15

Przedstawiam to jako obejście , a nie rozwiązanie. To może nie działać cały czas. Zrobiłem to w ten sposób, ponieważ robię bardzo podstawową stronę HTML, do użytku wewnętrznego, w bardzo dziwnym środowisku. Wiem, że istnieją biblioteki takie jak MaterializeCSS, które potrafią zrobić naprawdę ładne paski nav. (Zamierzałem z nich korzystać, 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>
 1
Author: Tyler Montney,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-12 03:10:22

Myślę, że to nie zadziała, bo inaczej będziesz musiał napisać scenariusz do tego. jeśli dobrze rozumiem twój problem, zaproponuję Ci użycie tego rodzaju rozwiązania

 -2
Author: Asheesh Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-12 08:52:49