Come posso rendere il contenuto di un elemento fisso scorrevole solo quando si supera l’altezza della finestra?

Ho un div posizionato fixed sul lato sinistro di una pagina web, contenente menu e link di navigazione. Non ha altezza dei css, il contenuto determina l’altezza, la larghezza è fissa. Il problema è che se il contenuto è troppo, il div sarà più grande della finestra di altezza, e parte del contenuto non sarà visibile. (Scorrere la finestra non aiuta, in quanto la posizione è fixed e il div non scorrere.)

Ho provato a impostare overflow-y:auto; ma che non sono di aiuto, il div non sembra di notare che parte di esso è al di fuori della finestra.

Come posso fare è contenuto scorrevole solo, se necessario, se il div appeso fuori dalla finestra?

  • Una soluzione con i CSS calc() può essere trovato qui : stackoverflow.com/q/29754195/3168107.
  • calc() è un tecnologia sperimentale e può comportare risultati imprevisti. Se si sceglie di utilizzare, assicurarsi di conoscere il vostro target di riferimento e di prova in quei browser.
  • Imbattuto nello stesso problema e qualcosa di simile a max-altezza: calc(100vh – 100px); dove il mio navbar e imbottiture sono stati che fino a 100px
InformationsquelleAutor Mkoch | 2013-09-19

 

9 Replies
  1. 74

    Probabilmente non si può. Ecco qualcosa che si avvicina. Non si ottiene il contenuto di flusso intorno ad esso, se non c’è spazio qui sotto.

    http://jsfiddle.net/ThnLk/1289

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

    Si può fare una percentuale altezza:

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

    .stuck {
        max-height: 100%;
    }
    • max-altezza era importante!
  2. 26

    Il link riportato di seguito verrà illustrato come ho realizzato questo. Non è molto difficile – solo alcune intelligente 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/

  3. 6

    Probabilmente avete bisogno di un interiore div. Con i css è:

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

    Questo è assolutamente fattibile con alcuni flexbox magia. Date un’occhiata a questo penna.

    Avete bisogno di css come questo:

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

    Questo sarà il lavoro a IE10+

  5. 1

    Qui è la pura HTML e CSS soluzione.

    1. Creiamo un contenitore per la navbar con
      posizione: fisso;
      height:100%;

    2. Quindi per creare una scatola interna con
      height: 100%;
      overflow-y: scroll;

    3. A quel punto, abbiamo messo fuori il contenuto all’interno di quella scatola.

    Ecco il codice:

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

  6. 0

    Presento questo come una soluzione piuttosto che una soluzione. Questo potrebbe non funzionare per tutto il tempo. Ho fatto in questo modo come sto facendo una semplice pagina HTML, per uso interno, in un modo molto bizzarro. So che ci sono librerie come MaterializeCSS che può fare veramente bello nav bar. (Stavo per usare loro, ma non ha funzionato con il mio ambiente.)

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

    non credo che funzionerà, altrimenti dovrete scrivere script per che.
    se io sono sempre il tuo problema in modo corretto quindi io vi suggerisco di utilizzare questo tipo di soluzione

    • Link-solo risposte non sono considerati di pregio. Se il link non muore, la risposta non troppo.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *