[Résolu] Grille de DIV 100% largeur et hauteur

Bonjour à tous,

Après pas mal de recherches et de tests, je n'arrive pas à trouver une solution au problème suivant:

j'aimerais faire une grille de 4 DIV sur toute la largeur d'une page et 3 DIV sur tout la hauteur de la partie visible de la page (viewport je crois que cela s'appelle).

J'utilise knacss (merci Alsa), j'ai essayé les grilles et les flexbox, ca marche bien pour mon problème de largeur, mais impossible pour la hauteur.

Pour info, c'est important je pense, j'utilise le plugin https://github.com/alvarotrigo/fullPage.js pour gérer le défilement de ma page par section qui s'adapte à la hauteur du viewport.
J'ai regardé dans la doc du plugin..rien trouvé non plus.

Merci d'avance pour votre aide et le temps que vous me consacrer.

Marco

pifoux a écrit :
J'aimerais faire une grille de 4 DIV sur toute la largeur d'une page et 3 DIV sur tout la hauteur de la partie visible de la pag.

Très bon exercice pratique. Deux solutions :
1. avec le modèle tabulaire : CodePen
2. avec le modèle flexbox : CodePen. Ici j'ai mis des gouttières (pour le fun).

Le modèle tabulaire proposé ici ne supporte pas les gouttières et est plus contraignant pour la mise en page, mais il est plus compatible que le modèle flexbox, ce dernier n'étant pas compatible avant IE10. Dans les deux cas j'utilise la fonction calc(), donc no-IE8. On peut rester compatible avec IE8 pour la première solution si l'on utilise des pourcentages précalculés.

Pour le modèle tabulaire (syntaxe Jade) :

html
  body
    .grid
      div
      div
      div
      div
    .grid
      div
      div
      div
      div
    .grid
      div
      div
      div
      div

Les CSS :

/* table grid 4 * 3 */
body {
    min-height: 100vh;
    margin: 0;
    text-align: center;
    color: #fff;
    background-color: DarkSlateGray;
}

.grid {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: calc(100vh / 3);
}

.grid > * {
    box-sizing: border-box;
    display: table-cell;
    height: calc(100vh / 3);
    line-height: 100%;
    background-image: radial-gradient(#777, #333);
}

Pour le modèle flexbox :

html
  body
    .grid
      div
      div
      div
      div
      div
      div
      div
      div
      div
      div
      div
      div

Les CSS :

/* flex grid 4 * 3 */
body {
    margin: 0;
    background-color: DarkSlateGray;
}

.grid {
    display: flex;
    flex-direction: wrap;
    flex-wrap: wrap; /* retour à la ligne */
    min-height: 100vh; /* 100% de la hauteur de l'écran, et au-delà si le contenu le nécessite */
    width: calc(100% + 1rem); /* ici on tient compte d'une gouttière en trop pour les éléments enfants... */
    margin-left: -1rem; /* ... et on fait un correctif ici */
}

.grid > * {
    box-sizing: border-box;
    padding: 1rem;
    margin: 0 0 1rem 1rem;
    width: calc(100% / 4 - 1rem); /* la largeur tient compte de la gouttière */
    background: IndianRed;
}

.grid > :nth-last-child(-n+4) { /* on cible les 4 derniers éléments */
    margin-bottom: 0;
}

Modifié par Olivier C (21 Jun 2015 - 06:48)

Bonjour Olivier,

Merci, merci beaucoup pour ta réponse.
Je ne sais comment te remercier, c'est clair, pratique et j’apprends des choses (l'unité vh).

Je suis allé voir également ton framework, ca à l'air prometteur.

Si je peux t'aider, n'hésite pas à faire appel à moi, je le ferai avec grand plaisir.

Encore merci

Marco