Comment faire en sorte que le contenu d'un élément fixe devienne défilant uniquement lorsqu'il dépasse la hauteur du viewport ?

Question

J'ai une div positionnée fixed sur le côté gauche d'une page web, contenant un menu et des liens de navigation. Aucune hauteur n'est définie par css, la hauteur est déterminée par le contenu, la largeur est fixe. 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 ne fonctionne pas, car la position est fixed et la div ne fera pas défiler.)

J'ai essayé de définir overflow-y:auto; mais cela ne semble pas aider, la div ne semble pas remarquer qu'une partie d'elle est à l'extérieur de la fenêtre.

Comment puis-je rendre son contenu scrollable uniquement, si nécessaire, si la div dépasse de la fenêtre ?

Answer 1

Voici comment j'ai accompli cela. Il vous suffit d'utiliser un peu de développement front-end astucieux !!

//début NAVIGATION MOBILE
$('#mobnav-btn').click(

  function() {
    $("html").toggleClass("mobile-menu-open");
    $(".xnav-wrapper").delay(500).queue(function(reset_scroll) {
      $(this).scrollTop(0);
      reset_scroll();
    });
  });
//fin NAVIGATION MOBILE

html {
  left: 0%;
  position: relative;
  overflow-x: hidden;
  transition: all .2s ease;
}

body {
  font-family: arial;
  font-size: 14px;
  line-height: 20px;
  padding: 30px;
}

/* début NAVIGATION MOBILE */

#mobnav-btn {
  position: fixed;
  top: 50px;
  right: 50px;
  opacity: 1;
  color: #000;
  display: block;
  cursor: pointer;
  padding: 10px 9px;
  padding-bottom: 6px;
  font-size: 16px;
  border: 2px solid #DEDEDE;
  z-index: 999999999999;
  transition: all .2s ease;
  background-color: white;
  border-radius: 3px;
}

.mobile-menu #mobnav-btn .mobnav-btn-label {
  display: block;
}

.mobile-menu-open #mobnav-btn {
  background-color: #232128;
  border-color: #232128;
}

.mobile-menu-open {
  left: 50%;
  overflow: hidden;
}

.mobile-menu-open #mobnav-btn .mobnav-icon {
  color: white;
}

.xnav {
  position: fixed;
  background: #232128;
  width: 50%;
  left: -50%;
  bottom: 0%;
  top: 0%;
  z-index: 99999999999999999;
  zoom: 1;
  transition: all .2s ease;
}

.mobile-menu-open .xnav {
  z-index: 9999999999999;
  zoom: 1;
  left: 0%;
}

.xnav-wrapper {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.xnav ul {
  float: none;
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.xnav ul ul {
  padding-left: 30px;
  font-size: 98%;
}

.sf-menu li {
  float: none;
  margin: 0px!important;
  background: none!important;
}

.sf-menu a,
.sf-menu .first a {
  background-image: none!important;
  color: white!important;
  padding: 15px;
  margin-left: 0px;
  margin-right: 0px;
  display: block;
  border-bottom: 1px solid #3f3b49;
  transition: all .2s linear;
  text-decoration: none;
}

.sf-menu a:hover {
  background-color: #3f3b49!important;
  padding-left: 20px;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
}

.xnav-wrapper::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(128, 128, 128, 0.7);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(32, 32, 32, 0.05);
}

/* fin NAVIGATION MOBILE */

    Menu

      Accueil
      Cupcakes

          1.1 Cupcakes
          1.2 Cupcakes
          1.3 Cupcakes

              2.1 Cupcakes
              2.2 Cupcakes
              2.3 Cupcakes

      Beignets
      Glaces
      Banana Split 
      Brownies
      Sucette
      Pixie Stix
      Chewing-gum
      Pépites de chocolat
      Cerises

Menu Mobile
RyanBrackett@gmail.com

Le concept est très simple : navigation en mode hors tableau en fonction de l'état actif ( html.mobile-menu-open ). Les éléments du menu mobile défilent si ils sont hors de la vue.

La partie CSS sera un peu différente car j'ai dû créer quelques styles qui sont nativement dans le framework. De plus, la partie CSS sera intégrée dans vos fichiers phone.css et tablet.css. Cupcake ipsum dolor sit amet. Wafer tootsie roll J'adore l'avoine
gâteau. Unerdwear.com glaçage beignet de l'ours gommeux guimauve gummies muffin tiramisu. Gâteau d'applicake aux muffins. Lollipop bear claw sweet roll macaroon. Jelly-o gummi ours tarte aux pommes. J'adore la tarte au fromage gâteau aux carottes pudding toffee
marzipan chupa chups jelly beans dragée. Tarte au chocolat gâteau à l'avoine brownie cookie tarte aux pommes. J'adore j'adore prunes en sucre j'adore j'adore chocolat guimauve sucette.

Tarte aux pommes glace dragée. Cotton candy jujubes bonbon biscuit croissant caramels. Marzipan jelly-o candy j'adore lollipop bonbon. Glaçage de beignets barre de chocolat tootsie roll bonbon tiramisu gelée de gelée. Marzipan J'adore sweet caramels
J'adore cupcake croissant guimauve. Pain d'épice danois marzipan gelée. Gâteau au chocolat gâteau à l'avoine danois pruneau de sucre bonbon. Tarte aux bonbons à la barbe à papa moitié moitié de coton guimauve rouleau sucré sucette tarte aux pommes danoise. Rouleau sucré beignet de griffe d'ours

Cheesecake griffe d'ours unerdwear.com unerdwear.com. Gouttes de citron biscuit chocolat tarte à l'avoine bonbons bonbon poudre. Tarte gingembre biscuit tarte à l'avoine jujubes bonbon poudre. Danois j'adore j'adore tarte gingembre
toffee. Glaçage j'adore chocolat. J'adore j'adore je love soufflé gingerbread jelly-o. Sucette biscuit gaufrette marzipan j'adore cheesecake biscuit gingembre. Oat cake cotton candy marzipan croissant. J'adore caramels cheesecake chocolat toffee. Fruitcake de poudre de gummies application cake lollipop glaçage.

Gaufrette glaçage d'amour doux jelly. J'adore muffin j'adore. Candy en sucre de mousseline de coton d'amour biscuit. Marzipan je love pie guimauve pain d'épice snaps à la sésame. Croissant pudding halvah sucre pruneau de sucre
confiserie gaufrette. Gâteau de pommes gingembre tarte à l'avoine jujubes bon bon bonbon poudre. J'adore gingembre gingembre tarte aux noix. Glaçage j'adore chocolat. Halvah J'adore j'adore soufflé gâteau de pain d'épice jelly-o. Bonbon biscuit gaufrette marzipan j'adore cheesecake biscuit de sésame. Gâteau à l'avoine gauboufret croissant. J'adore caramels cheesecake
chocolat toffee. Fruitcake de poudre de gummies application cake lollipop la guimauve.

Croissant pudding de bonbons de gâteau de gingembre de tarte à l'avoine. Doigt auto-portant j'adore chantilly j'adore soufflé gâteau de chocolat soufflé. Condition jelly j'adore j'adore donut gâteau à l'avoine guimauve. Gummies glaçage pudding croissant sucré gaufrette glaçage. Gâteau de pommes à la gaufrette. J'aime le glaçage de la gaufrette

Muffin à la gaufrette sésame tiramisu. Unerdwear.com rouleau de bonbons sucrés j'adore. Tootsie roll soufflé lollipop gâteau au chocolat soufflé. Gelée de tootsie rolls j'adore j'adore je j'adore ne j'adore pas. Bonbons glaçage pudding à la gaufrette. Gummies croissant pâtisserie
bonbon brownie glace. Gaufrette muffin glaçage. J'adore j'adore pomme de terre gaufrette gelée j'adore jelly beans chupa chups. Candy bonbon gâteau aux carottes. Croissant j'adore bonbons canne à sucre pudding donut toffee. Conton candy glace chupa chups sucre à bonbons muffin semoule.

J'adore soufflé donut donut. Jelly beans bear claw sucre pruneau biscuit toffee gummi bears. Tiramisu lollipop applicake jujubes barre de chocolat donut pudding barre de chocolat bear claw.

Answer 2

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

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

Answer 3

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

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

Answer 4

Cela est absolument faisable avec un peu de magie flexbox. Jetez un coup d'œil à ce pen.

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+

Answer 5

Voici la solution pure en HTML et CSS.

1. Nous créons une boîte de conteneur pour la barre de navigation avec position: fixed; height:100%;

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

3. Ensuite, nous plaçons notre contenu à l'intérieur de cette boîte.

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

    Contenu de la barre de navigation commence
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Contenu de la barre de navigation
    Fin du contenu de la barre de navigation

  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum
  Lorem Ipsum

Lien vers jsFiddle: