J'ai cherché partout sur le Web pour cela, mais je n'ai trouvé personne qui me convienne vraiment ou même qui travaille. Les réponses que j'ai trouvées sont très anciennes et / ou ne sont pas à 100% ce que je recherche donc j'espère que si quelqu'un peut m'aider avec cela.

J'utilise bootstrap 4 dans mon application, donc si cela peut être fait avec bootstrap, oui, mais le css pur est également correct.

Ce que j'essaye de faire, c'est d'avoir 4 div côte à côte

Exemple:

<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div>

    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
    <div class="col">
        <h1>Item 2</h1>
    </div>
</div>

Cela fonctionne à cause de bootstrap 4 mais maintenant je veux aussi que la hauteur de div s'étende jusqu'au bas de l'écran et si le contenu de cette div est plus long que la hauteur de l'écran, alors il devrait défiler (à l'intérieur du div).

Je pensais aux boîtes flexibles mais je ne pouvais pas le faire fonctionner.

0
Niels Lucas 17 nov. 2017 à 22:00

4 réponses

Meilleure réponse

Puisque vous utilisez bootstrap 4, flex est déjà impliqué.

Si l'idée est de laisser la ligne croître jusqu'à 100% de la hauteur de la fenêtre, puis d'afficher une barre de défilement dans l'enfant qui dépassera cette valeur, vous devez créer une classe personnalisée impliquant max-height et overflow:

Exemple de classe personnalisée

<div class="row h100-scroll  ">

Sélecteurs et règles à utiliser pour commencer

.h100-scroll .col {/* to scroll col individually*/
  max-height: 100vh;
  overflow: auto;
}

Ou

.h100-scroll  {/* to scroll the row itself */
  max-height: 100vh;
  overflow: auto;
}

Démo ci-dessous, exécutez un extrait et passez le texte sur la première colonne

.h100-scroll .col {
  max-height: 100vh;
  overflow: auto;
}

.col br {display:none;}
p:hover br {display:block;}
body {
  margin: 0 1em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css" rel="stylesheet" />
<div class="row h100-scroll  ">
  <div class="col">
    <h1>Item 1</h1>
    <p>hover me show the br and add a scrollbar<br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . <br/> .<br/> . 
  </div>

  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
  <div class="col">
    <h1>Item 2</h1>
  </div>
</div>
1
G-Cyrillus 17 nov. 2017 à 20:20

Vous pouvez définir les colonnes sur 'height: 100%' ou 'height: 100vh' et définir 'overflow: scroll;'.

    <!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <style>
        html, body {
            height: 100%;
            margin:0;
        }
        .row {
            width: 100%;
        }
        .col {
            display: inline-block;
            box-sizing: border-box;
            width: 25%;
            margin: 0;
            height: 100%;
            overflow: auto;
            vertical-align: top;
        }
    </style>
</head>
<body>
<div class="row">
    <div class="col">
        <h1>Item 1</h1>
    </div><div class="col">
        <h1>Item 2</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div><div class="col">
        <h1>Item 2</h1>
    </div><div class="col">
        <h1>Item 2</h1>
    </div>
</div>
</body>
</html> 
0
jangreen 17 nov. 2017 à 19:28

Vous voudrez peut-être faire cela dans jQuery. Explication:

Si la hauteur du div est plus longue que la hauteur du document, affichez un défilement dans le div

Code:

$(document).ready(fuction(){

var docHeight = $(document).height();

var divHeight = $('.the-four-divs').height();
If(divHeight > docHeight){
$('.the-four-divs').css('overflow-x', 'scroll');

}

});

"

J'espère que ça aide monsieur.

0
CodeGreenie 17 nov. 2017 à 19:13

Vous devrez définir le height de l'élément sur 100%. Si le parent n'est pas à 100% de l'écran, vous devrez également définir la hauteur du parent. Si votre structure HTML ressemble à ceci ...

<html>
<body>
  <div class="row">
      <div class="col"></div>
  </div>
</body>
</html>

... alors vous devrez définir le height de tous ceux-ci sur 100%:

html, body, div.row, div.col {
    height:100%;
}

Pour créer la barre de défilement, vous pouvez définir le débordement pour faire défiler:

.col {
    overflow:scroll;
}
0
smilebomb 17 nov. 2017 à 19:36
47357556