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 :

Définir la hauteur de 2 div à 100%


Sujet :

Dimensionnement en CSS

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Mars 2004
    Messages
    178
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mars 2004
    Messages : 178
    Points : 94
    Points
    94
    Par défaut Définir la hauteur de 2 div à 100%
    Bonjour,

    J'aimerai séparer l'écran de l'utilisateur avec 2 div de couleurs différentes et avec une largeur de 50%

    ceci a été fait pas de soucis, mais j'aimerai aussi que la hauteur des couleurs des 2 div soit toujours affichés même lorsqu'il y a une scrollbar et même si l'écran de l'utilisateur du site à d'autres résolutions.

    Pour l'instant j'ai défini à une hauteur de 1500 pixel, mais après il y a du blanc.....

    merci d'avance pour votre aide!

    ci-dessous le code que l’emploi:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <div id="gauche" style="width:50%; height:1500px; background-color:#F90; margin:0px; padding:0px; position:relative; top:-10px; z-index:1;">
    &nbsp;
    </div>
     
     
    <div id="droite" style="width:50%; height:1500px; background-color:#0066FF; position:relative; float:right; top:-1510px; right:0px; z-index:1;">
    &nbsp;
    </div>

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    Janvier 2004
    Messages
    9 868
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2004
    Messages : 9 868
    Points : 16 258
    Points
    16 258
    Par défaut
    C'est parce que tu définis un top négatif avec un position:relative;.

    Tu peux plutôt faire comme ça :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="gauche" style="width:50%; height:1500px; background-color:#F90; float:left;">
    &nbsp;
    </div>
     
    <div id="droite" style="width:50%; height:1500px; background-color:#0066FF; float:right;">
    &nbsp;
    </div>

    En n'oubliant pas de mettre un margin:0; sur le body.

  3. #3
    Membre habitué
    Homme Profil pro
    Intégrateur Web
    Inscrit en
    Juillet 2014
    Messages
    92
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Intégrateur Web
    Secteur : Boutique - Magasin

    Informations forums :
    Inscription : Juillet 2014
    Messages : 92
    Points : 152
    Points
    152
    Par défaut
    Tu voudrais pas plutôt que la hauteur s'adaptent en fonction du contenu (d'où son problème de couleur de background) ?
    Puisque le flottement fait sortir les div du flux la hauteur s'en trouve impactée.
    C'est pourquoi il a mis un 1500 pixels pour être large.

    J'ai plus l'impression que c'est un problème de ce genre qu'il veut résoudre

  4. #4
    Membre éclairé
    Avatar de s0h3ck
    Inscrit en
    Mars 2013
    Messages
    181
    Détails du profil
    Informations forums :
    Inscription : Mars 2013
    Messages : 181
    Points : 871
    Points
    871
    Par défaut
    Citation Envoyé par surfeur2 Voir le message
    Pour l'instant j'ai défini à une hauteur de 1500 pixel, mais après il y a du blanc.....
    Pour faire du pouce sur l'idée de Bisûnûrs, voici une solution :

    Code HTML:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <div id="gauche"></div>
      <div id="droite"></div>
    </body>
    </html>

    Code CSS:
    Code css : 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
    body {
      height: 1500px;
      margin: 0px;
      padding: 0px;
    }
     
    div {
      width:50%;
      height:100%;
    }
     
    #gauche {
      float: left;
      background-color:#F90;
    }
     
    #droite {
      float: right;
      background-color:#0066FF;
    }

    Et bien sûr, JS Bin (edit) pour que vous expérimenter le tout.
    N'oubliez pas de marquer votre sujet comme et de mettre des aux messages apportant un plus à votre discussion.

    « Ce qui se conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément » Boileau.
    « Le mystère fait découvrir une autre dimension » mon imagination.





Discussions similaires

  1. Hauteur div 100% de l'espace restant dans la page
    Par jimmyneutron dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 15/10/2011, 12h22
  2. Div 100% hauteur restante
    Par tscoops dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 22/12/2009, 16h28
  3. Définir la hauteur d'un div sous IE
    Par rinuom99 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 21/11/2008, 12h51
  4. hauteur div (100%) + scroll
    Par manutudescends dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/10/2007, 20h48
  5. 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

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