[Résolu] DIV qui prend toute la hauteur restante.

Bonjour, après avoir épluché les solutions sur le web je post mon message, n'ayant pas trouvé une solution à mon problème.

Voici mon code actuel :

html, body {
    height: 100%;
}

.div-img {
    height: 180px;

    background-color: yellow;
}

.div-tuile {
    height: auto !important;
    height: 100%;
    min-height: 100%;

    background-color: green;
}

Ce que je recherche :
Je veux que ma div-tuile prenne toute la hauteur jusqu'en bas de la fenêtre, sans dépasser donc sans scroll bar. Donc toute la hauteur, après ma première div.

Mon problème :
Ma div-tuile garde la taille exacte de mon body. Ce qui fait que j'ai ma première div (div-img) qui fait 180px et en dessous ma div-tuile qui fait 100% de la taille du body, donc créer une scrollbar. (taille de la fenêtre, il ne prend pas en compte ma première div).

Faut-il ajouter un display quelque chose à un de ces éléments ? Avez-vous une suggestion, idée ?

Merci bien !
Modifié par kobals (12 Nov 2018 - 12:03)

Bonjour,
beaucoup d'erreurs et d'illogismes dans ce code, tu compliques inutilement.
Enlève tous ces 100% inutiles et dangereux,
on ne garde que ceci :
1 - enlever les marges du body;
2 - garder la hauteur de la div contenant l'image, ne pas oublier un vertical-align:bottom pour l'image elle-même
3 - calculer la hauteur de la div tuile, qui est égale à 100vh moins la hauteur de la div image
donc utiliser calc() pour la hauteur de la div tuile dans la feuille de style

Notions à maîtriser :
vh, hauteur du viewport,
calc() : utile pour calculer la valeur d'une propriété en CSS

Dans la liste des notions à maitriser, rajouter :
- flex
- var() /* utilise pour calc() */

body { display: flex; flex-direction: column; min-height: 100vh; }
.div-tuile { flex-grow: 1; }

Il ne reste plus qu' à colorier

Merci bien, je vais approfondir ça !

https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Dans ton cas particulier, voir le paragraphe "Flexibilité", mais le reste est à lire aussi.

Tu peux également utiliser css grid-layout :

body {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr;
  grid-template-rows: 180px 1fr;
}
.div-img { grid-column: 1; grid-row: 1; }
.div-tuile { grid-column: 1; grid-row: 2; }

Merci beaucoup.