web-dev-qa-db-fra.com

Comment puis-je faire défiler le contenu d'un élément fixe uniquement lorsqu'il dépasse la hauteur de la fenêtre?

J'ai une div positionnée fixed sur le côté gauche d'une page Web, contenant des liens de menu et de navigation. Il n'a pas de hauteur définie à partir de css, le contenu détermine la hauteur, la largeur est fixée. Le problème est que si le contenu est trop important, la div sera plus grande que la hauteur de la fenêtre et une partie du contenu ne sera pas visible. (Faire défiler la fenêtre n'aide pas, car la position est fixed et la div ne défilera pas.)

J'ai essayé de définir overflow-y:auto; mais cela n'aide pas non plus, la div ne semble pas remarquer qu'une partie de celle-ci est en dehors de la fenêtre.

Comment puis-je faire en sorte que son contenu défile uniquement si besoin est, si la variable div se trouve en dehors de la fenêtre?

htmlcsscss-position
62
Mkoch

Vous ne pouvez probablement pas. Voici quelque chose qui se rapproche. Il n'y aura pas de contenu à circuler s'il y a de l'espace en dessous. 

http://jsfiddle.net/ThnLk/1289

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

Vous pouvez aussi faire un pourcentage de hauteur:

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

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

Le lien ci-dessous démontrera comment j'ai accompli cela. Pas très difficile - il suffit d'utiliser un ingénieux développeur front-end !!

<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

Vous avez probablement besoin d'un div interne. Avec css c'est: 

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

Ceci est absolument faisable avec un peu de magie flexbox. Jetez un oeil à ce stylo .

Vous avez besoin de css comme ceci:

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

Cela fonctionnera dans IE10 +

2
transGLUKator

Essayez ceci sur votre position: élément fixe.

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

Ajoutez ceci à votre code pour une hauteur fixe et ajoutez un parchemin.

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

Voici la solution pure HTML et CSS.

  1. Nous créons un conteneur pour navbar avec Position: fixe; Hauteur: 100%;

  2. Ensuite, nous créons une boîte intérieure avec Height: 100%; Overflow-y: scroll;

  3. Ensuite, nous mettons le contenu dans cette case.

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

Lien vers jsFiddle:

1
Manoj Negi

Je présente ceci comme une solution de contournement plutôt qu'une solution. Cela peut ne pas fonctionner tout le temps. Je l’ai fait de la même manière que je fais une page HTML très basique, à usage interne, dans un environnement très bizarre. Je sais qu'il y a des bibliothèques comme MaterializeCSS qui peuvent vraiment faire de jolies barres de navigation. (J'allais les utiliser, mais cela ne fonctionnait pas avec mon environnement.)

<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