Wie kann ich den Inhalt eines festen Elements nur dann scrollbar machen, wenn er die Höhe des Ansichtsfensters überschreitet?

Ich habe eine divPosition fixedauf der linken Seite einer Webseite, die Menü- und Navigationslinks enthält. Es ist keine Höhe von CSS festgelegt, der Inhalt bestimmt die Höhe, die Breite ist fest. Das Problem ist, dass wenn der Inhalt zu groß ist, divdieser größer als die Fensterhöhe ist und ein Teil des Inhalts nicht sichtbar ist. (Das Scrollen im Fenster hilft nicht, da die Position ist fixedund das divnicht scrollen wird.)

Ich habe versucht zu setzen, overflow-y:auto;aber das hilft auch nicht, der Div scheint nicht zu bemerken, dass sich ein Teil davon außerhalb des Fensters befindet.

Wie kann ich den Inhalt nur bei Bedarf scrollbar machen, wenn diver aus dem Fenster hängt?

Das kannst du wahrscheinlich nicht. Hier ist etwas, das nahe kommt. Sie werden keinen Inhalt bekommen, der um ihn herum fließt, wenn unten Platz ist.

http://jsfiddle.net/ThnLk/1289

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

Sie können auch eine prozentuale Höhe festlegen:

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

.stuck {
    max-height: 100%;
}

Der folgende Link zeigt, wie ich dies erreicht habe. Nicht sehr schwer - muss nur einen cleveren Front-End-Entwickler verwenden !!

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

Du brauchst wahrscheinlich einen inneren Div. Mit CSS ist:

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

Versuchen Sie dies an Ihrer Position: festes Element.

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

Dies ist mit etwas Flexbox-Magie absolut machbar. Schauen Sie sich diesen Stift an .

Sie benötigen CSS wie folgt:

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

Dies funktioniert in IE10 +

Hier ist die reine HTML- und CSS- Lösung.

1. Wir erstellen eine Containerbox für die Navigationsleiste mit der Position: fest; Höhe: 100%;

2. Dann erstellen wir eine innere Box mit der Höhe: 100%; Überlauf-y: scrollen;

3. Als nächstes setzen wir den Inhalt in diese Box.

Hier ist der Code:

.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 zu jsFiddle:

Ich präsentiere dies eher als Problemumgehung als als Lösung. Dies funktioniert möglicherweise nicht immer. Ich habe es so gemacht, weil ich eine sehr einfache HTML-Seite für den internen Gebrauch in einer sehr bizarren Umgebung mache. Ich weiß, dass es Bibliotheken wie MaterialiseCSS gibt, die wirklich schöne Navigationsleisten ausführen können. (Ich wollte sie verwenden, aber es funktionierte nicht mit meiner Umgebung.)

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

Fügen Sie dies Ihrem Code für eine feste Höhe hinzu und fügen Sie eine Schriftrolle hinzu.

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

Für Ihren Zweck können Sie einfach verwenden

position: absolute;
top: 0%;

und es ist immer noch veränderbar, scrollbar und reaktionsschnell.