Wie kann ich den Inhalt von einem festen element Scrollbar nur wenn es über die Höhe des Viewports?

Ich habe eine div positioniert fixed auf der linken Seite einer web-Seite mit Menü-und Navigations-links. Es hat keine Höhe festlegen von css, die Inhalte bestimmt, die Höhe, die Breite ist fest. Das problem ist, dass wenn der Inhalt zu viel, die div wird größer sein als das Fenster in der Höhe, und ein Teil des Inhalts nicht sichtbar sein. (Scrollen Sie das Fenster hilft nicht, da die position ist fixed und die div nicht scrollen.)

Ich versuchte, zu overflow-y:auto; das hilft aber nicht, entweder, die div scheint nicht zu bemerken, dass ein Teil davon außerhalb des Fensters.

Wie kann ich es machen das der Inhalt Scrollbar nur wenn benötigt, wenn die div hängt aus dem Fenster?

InformationsquelleAutor Mkoch | 2013-09-19
  1. 76

    Können Sie wahrscheinlich nicht. Hier ist etwas, das nahe kommt. Bekommen Sie keine Inhalte, die Strömung um, falls es Raum unten.

    http://jsfiddle.net/ThnLk/1289

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

    Können Sie eine prozentuale Höhe sowie:

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

    .stuck {
    max-height: 100%;
}
    • die max-Höhe war wichtig!
    InformationsquelleAutor isherwood
  2. 26

    Den link unten zeigen, wie ich das bewerkstelligen. Nicht sehr schwer - nur verwenden Sie einige clevere front-end-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/

    InformationsquelleAutor Ryan Brackett
  3. 6

    Müssen Sie 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%;
}
    InformationsquelleAutor Aureliano Far Suau
  4. 3

    Versuchen, diese auf Ihrer position:fixed element.

    overflow-y: scroll;
max-height: 100%;
    InformationsquelleAutor Lucas Bustamante
  5. 2

    Dies ist absolut machbar mit einigen flexbox-Magie. Haben Sie einen Blick auf diese Stift.

    Müssen Sie css so:

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

    Diese arbeiten werden in IE10+

    InformationsquelleAutor transGLUKator
  6. 1

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

    1. Erstellen wir einen container box für die Navigationsleiste mit
      position: fixed;
      height:100%;

    2. Dann erstellen wir eine innere box mit
      height: 100%;
      overflow-y: scroll;

    3. Als Nächstes haben wir die Inhalte im inneren der box.

    Hier ist der code:

    CSS:

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

    HTML:

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

    InformationsquelleAutor Manoj Negi
  7. 0

    Ich präsentiere diese als Abhilfe eher als eine Lösung. Dies kann nicht die ganze Zeit arbeiten. Ich habe es auf diese Art mache ich eine sehr einfache HTML-Seite für den internen Gebrauch, in einem sehr bizarren Umgebung. Ich weiß, es gibt Bibliotheken, wie MaterializeCSS, die das tun, wirklich nett nav bars. (Ich wollte, Sie zu benutzen, aber es funktionierte nicht mit meinem Umfeld.)

    <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>
    InformationsquelleAutor Tyler Montney
  8. 0

    Fügen Sie diese zu Ihrem code für "Feste Höhe" und fügen Sie eine schriftrolle.

    .fixedbox {
    max-height: auto;
    overflow-y: scroll;
}
    InformationsquelleAutor Saurav Sen
  9. -2

    ich glaube nicht, dass das funktionieren wird oder sonst werden Sie haben, um ein Skript schreiben, dass für.
    wenn ich dein problem richtig dann werde ich schlage vor, Sie verwenden diese Art von Lösung

    • Link-nur die Antworten sind nicht als wertvoll angesehen. Falls der link stirbt, die Antwort nicht zu.
    InformationsquelleAutor Asheesh Kumar
Schreibe einen Kommentar