webentwicklung-frage-antwort-db.com.de

Wie kann ich den Inhalt eines festen Elements nur dann scrollen lassen, wenn er die Höhe des Viewports überschreitet?

Ich habe eine div auf der linken Seite einer Webseite mit fixed, die Menü- und Navigationslinks enthält. Es ist keine Höhe von css festgelegt, der Inhalt bestimmt die Höhe, die Breite ist festgelegt. Das Problem ist, dass, wenn der Inhalt zu viel ist, die div größer als die Fensterhöhe ist und ein Teil des Inhalts nicht sichtbar ist. (Das Scrollen des Fensters hilft nicht, da die Position fixed ist und die div keinen Bildlauf durchführt.)

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

Wie kann ich den Inhalt nur dann scrollen lassen, wenn die Variable div außerhalb des Fensters hängt?

62
Mkoch

Du kannst es wahrscheinlich nicht. Hier ist etwas, das nahe kommt. Sie werden keinen Inhalt umfließen lassen, wenn darunter 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 ausführen:

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

.stuck {
    max-height: 100%;
}
66
isherwood

Der Link unten zeigt, wie ich das geschafft habe. Nicht sehr schwer - Sie müssen nur ein paar clevere Frontend-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/

26
Ryan Brackett

Du brauchst wahrscheinlich ein inneres Div. Mit css ist: 

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

Mit etwas Flexbox-Magie ist dies absolut machbar. Schauen Sie sich diese pen an.

Sie brauchen 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 +

2
transGLUKator

Versuchen Sie dies an Ihrer Position: festes Element.

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

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

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

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

  1. Wir erstellen eine Container-Box für die Navbar mit Position: fest; Höhe: 100%;

  2. Dann erstellen wir eine innere Box mit Height: 100%; Overflow-y: scroll;

  3. Als Nächstes legen wir den Inhalt in dieser Box aus.

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:

1
Manoj Negi

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

<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>
0
Tyler Montney