IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Div à 100% du vertical visible


Sujet :

CSS

  1. #1
    Membre chevronné Avatar de Danyel
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juillet 2005
    Messages
    1 698
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juillet 2005
    Messages : 1 698
    Points : 1 961
    Points
    1 961
    Par défaut Div à 100% du vertical visible
    Salut all,
    Je cherche a afficher un/une div à 100% du vertical visible du screen.
    J'utilise pour cela : min-height: 100vh;
    Mais comme il y a un header et un footer (qui peuvent etre de hauteur variable) la hauteur du div est superieure de la hauteur du dit header et footer (plutot logique)
    J'aimerai savoir s'il est possible d'avoir juste la valeur du vertical visible ?
    Je pense qu'un calc() doit est possible pour calculer un (100vh - (hauteur du header + hauteur du footer)) mais je n'ai pas l'info.
    Si qq a la solution ou une piste.
    Merci par avance.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 180
    Points : 44 827
    Points
    44 827
    Par défaut
    Bonjour,
    une des solutions est le passage à un modèle GRID, FLEXBOX marcherait également, exemple simple de mise en place :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Modèle GRID simple</title>
    <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    body {
      display: grid;
      grid-template-rows: auto 1fr auto;
      height: 100vh;
    }
    header {
      background-color: #DEF;
    }
    main {
      background-color: #EFD;
      overflow: auto;
    }
    footer {
      background-color: #FDE;
    }
    </style>
    </head>
    <body>
    <header>
      <h1>Header</h1>
    </header>
    <main>
      <p>Contenu de la page...</p>
    </main>
    <footer>
      <p>Footer</p>
    </footer>
    </body>
    </html>

  3. #3
    Membre chevronné Avatar de Danyel
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juillet 2005
    Messages
    1 698
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juillet 2005
    Messages : 1 698
    Points : 1 961
    Points
    1 961
    Par défaut
    Merci NoSmoking, je vais etudier cela

  4. #4
    Membre chevronné Avatar de Danyel
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    Juillet 2005
    Messages
    1 698
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 55
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : Juillet 2005
    Messages : 1 698
    Points : 1 961
    Points
    1 961
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    GRID - FLEX
    NoSmoking, selon toi quel est celui que l'on doit utiliser (que ce soit pour sa puissance ou ses fonctionnalites) ?

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 478
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 478
    Points : 15 868
    Points
    15 868
    Par défaut
    flex gère plutot des affichages linéaires (avec éventuellement des retours à la ligne ou colonne) :
    https://developer.mozilla.org/fr/doc...ble_Box_Layout
    et grid organise un affichage sous forme de grille :
    https://developer.mozilla.org/fr/doc...SS_Grid_Layout

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 180
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 180
    Points : 44 827
    Points
    44 827

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Div de couleur non visible en Firefox et visible en IE7
    Par hellspawn_ludo dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 13/01/2008, 21h53
  2. hauteur div (100%) + scroll
    Par manutudescends dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/10/2007, 20h48
  3. Hauteur de DIV 100% dans TD impossible dans firefox
    Par frognico dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 03/07/2007, 18h34
  4. Combler un div de menu vertical pour l'aligner avec un div de contenu
    Par pc.bertineau dans le forum Mise en page CSS
    Réponses: 8
    Dernier message: 01/06/2007, 00h58
  5. [DIV][CSS] Alignement vertical
    Par pmartin8 dans le forum Mise en page CSS
    Réponses: 15
    Dernier message: 02/11/2005, 15h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo