28172 sujets

CSS et mise en forme, CSS3

Mise en forme 1 colonne 3 lignes

Bonjour,

Merci pour les réponses.

J'ai une div avec une taille fixe et connue, qui contient trois divs.

Je souhaiterais que les 3 divs contenues soient affichées comme cela :

la première (la plus haute) se "colle" en haut"
la dernière (la plus basse) se "colle" en bas
et celle du milieu remplisse tout l'espace restant disponible.

Merci.

MitchMan Smiley smile
Bonjour,

Pour display:table, je ne vois pas...

Dislplay:flex répond effectivement à la demande. Par contre pour la compatibilité c'est encore un peu tôt : pas avant IE10, et encore dans une version préliminaire de la spécification, Safari 6, lui, soutien une syntaxe devenue obsolète, des bugs avant Firefox28, etc. Mais s'il est utilisé en amélioration progressive... oui, c'est pas mal :

<div class="flex">
  <div>…</div>
  <div class="flex-content">…</div>
  <div>…</div>
</div>


.flex {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.flex-content {
  flex: 1; // occupe la hauteur restante
}

Pour la source du code voir ici.
Modifié par Olivier C (12 Feb 2015 - 05:56)
SolidSnake a écrit :
Avec un modèle tabulaire

Pas mal ! Et du coup c'est compatible sur tous les navigateurs dès IE8 ! Je ne connaissais pas cette propriété de display:table.

Merci pour l'info, du coup cela me profite à moi aussi et je vais de ce pas remettre à jour mes CSS.
Sujet clos
Aller à