web-dev-qa-db-fra.com

La grille CSS imbriquée remplit implicitement la hauteur restante de la grille parente

J'essaie de faire en sorte qu'une grille CSS enfant respecte les dimensions d'une grille parent. Comment pourrais-je faire ça?

J'écrivais initialement quelque chose comme ceci: https://codepen.io/anon/pen/XVExrj

CSS:

.site, body, html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height:300px;
  width:300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    'nav'
    'child';
  background-color:grey;
}

.nav { 
  background-color: #0D47A1;
  grid-area: nav;
}

.child { grid-area:child; }

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas:
    'test';
  background-color:grey;
}

.content {
  background-color: red;
  overflow:auto;
  grid-area:test;
  height:3000px;
}

* { box-sizing: border-box; }

HTML

<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>

J'aimerais que "contenu" soit une zone à défilement qui n'augmente pas la hauteur du parent (donc elle devrait être "270px")

csscss3css-grid
5
Matthew I

L'élément de grille (.child) reçoit min-height: auto par défaut. Appliquez min-height: 0 à .child pour le remplacer.

Ajoutez ensuite height: 100% à .child-grid et overflow: auto à content...

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 10vh 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: #0D47A1;
  grid-area: nav;
}

.child {
  grid-area: child;
  min-height: 0;
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
  height: 100%;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>

5
sol

Voici une solution simple et rapide sans modification de votre code HTML. Ajoutez simplement ceci à votre code:

.child { 
   overflow: auto;
}

Cela remplace le paramètre par défaut min-height: auto sur les éléments de la grille, ce qui leur permet de réduire la taille de leur contenu et de créer des conditions de débordement.

Explication complète ici: Empêcher le contenu d’agrandir les éléments de la grille

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
  overflow: auto;   /* NEW */
}

.child-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: 'test';
  background-color: grey;
}

.content {
  background-color: red;
  overflow: auto;
  grid-area: test;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="child-grid">
      <div class="content">
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
        <div>blah</div>
      </div>
    </div>
  </div>
</div>

Alternativement, au lieu de ce que vous avez ici:

.parent-grid {
  display: grid;
  height: 300px;
  grid-template-rows: 30px 1fr;
}

Essaye ça:

.parent-grid {
  display: grid;
  grid-template-rows: 30px 270px;
}

.content {
  overflow: auto;
  height: 100%;
}

J'ai également supprimé un conteneur supplémentaire (.child-grid) qui ne semble pas nécessaire.

.site,
body,
html {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

.parent-grid {
  display: grid;
  height: 300px;
  width: 300px;
  grid-template-rows: 30px 270px;
  grid-template-columns: 1fr;
  grid-template-areas: 'nav' 'child';
  background-color: grey;
}

.nav {
  background-color: aqua;
  grid-area: nav;
}

.child {
  grid-area: child;
}

.content {
  background-color: red;
  overflow: auto;
  height: 100%;
}

* {
  box-sizing: border-box;
}
<div class="parent-grid">
  <div class="nav">Sidebar</div>
  <div class="child">
    <div class="content">
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
      <div>blah</div>
    </div>
  </div>
</div>

5
Michael_B

Eh bien, donnez une hauteur dédiée à votre grille enfant: 

height: 240px;

et set 

overflow: auto;

Donc, en effet, la hauteur est assurée. Et si nécessaire, des barres de défilement apparaîtront. Pas sûr, si la fonctionnalité assez récente des grilles CSS est vraiment la meilleure chose à utiliser ici. Vous voudrez peut-être consulter flexbox: https://codepen.io/fnocke/details/RxMKOK

Ou - même plus compatible - vous pourriez en effet rester avec display: block; normal. Tant que vous spécifiez des hauteurs et définissez le dépassement, cela devrait également être le cas.

0
Frank Nocke