Forum : Parent, enfant et largeur et hauteur en %

Bonsoir,

Je m'entrâine à réaliser des petits trucs de mon côté mais je rencontre un petit probème.
En, effet, j'ai une div parent qui prend toute ma page, puis deux div enfant, une prenant une partie de la hauteur et l'autre le reste.

<div class="Main">
    <div class="FirstC">
        <img src="Image/banner.png" alt="" class="Banner" />
    </div>
    <div class="SecondC">

    </div>
</div>

.Main{
width:100%;
height:100%;
}
.FirstC{
width:100%;
height:auto;
}
.Banner{
width:100%;
height:100%;
}
.SecondC{
    width:100%;
    height:100%;
}

Le problème est que ma deuxième div prend 100% du parent alors que je pensaisqu'elle prendrait 100% de la place restante.
De plus, je ne sais pas comment definir la hauteur de SecondC en focntion du FirstC car il a une height en auto donc on ne peut pas connaître la hauteur à l'avance.

Je vous remercie pour vos réponse.

SLK

Réponse acceptée

Salut,

Les flexbox semblent être une bonne solution pour ça.

Sinon sans utiliser les flexbox,
comme le firstC semble contenir un truc de hauteur fixe (la bannière),
je pense que tu peux te débrouiller avec position :

<div class="main">
    <div class="firstC">
       <p>First</p>
    </div>
    <div class="secondC">
       <p>Second</p>
    </div>
</div>

CSS sans Flexbox :

.main {
    position: relative;
    min-height : 100vh;
    width : 100vw;
    max-width : 1000px;
    border: 5px solid black;
}
.firstC {
    background-color : orange;
    height: 200px;
}
.secondC {
    position: absolute;
    width: 100%;
    background-color : yellow;
    top: 200px; /* La hauteur de "firstC" */
    bottom: 0;
}

[EDIT]
Je mets une solution possible avec Flexbox aussi si ça t'intéresses.

CSS avec Flexbox :

.main {
    display: flex;
    flex-flow: column;
    min-height : 100vh;
    width : 100vw;
    max-width : 1000px;
    border: 5px solid black;
}
.firstC {
    background-color : orange;
    height: 200px;
}
.secondC {
    display: flex;
    width: 100%;
    flex: 1;
    background-color : yellow;

}

SimonDevelop

Tu dois mettre le height de ta classe .SecondC en auto je crois.

Krokilex

Auteur

Merci pour les réponses.
Fukotaku, j'ai deja essayé avec le auto mais le probème est que le auto s'adapte au contenu dans le cas d'une div.

Ofilot, je tiens à m'excuser car je me suis mal exprimer.
En effet,le but est d'avoir une bannière au dessus, donc mon FirstC, et en en dessous, mon SecondC et donc le probème est de définir la hauteur du SecondC et non la largeur.

neecride

Alors le truc a comprendre c'est que l'on met 100% quand le container a une taille définie par exemple :

container 400px > enfant du container 100% = 400px

Donc ton .main fait 100% a partir du body donc la taille de l'ecran.

Autrement dit il faut mettre des taille fixe en px ou em ou autre en fonction du gabarit que tu veut.

Krokilex

Auteur

Merci pour la réponse.
Je ne peux pas determiner toutes les tailles d'écran à l'avance et le but est que les même proportion soit respecté pour chaque écran. Vu que la première div contenant ma banière s'adaptera en hauteur en fonction de la longueur de l'écran je ne peux pas définir une hauteur fixe que ce soit pour mon FirstC ainsi que pour mon SecondC.

neecride

si tu peut faire un shema du gabarit que tu veut ça aidera a comprendre, tu veut faire du responsive ? sinon je vois pas.

Krokilex

Auteur

Oui c'est pour du responsive et je vais faire un schéma.

Krokilex

Auteur

Voici le schéma

http://image.noelshack.com/fichiers/2016/50/1481650920-schema.png

Krokilex

Auteur

Merci pour ta réponse, j'ai utilisé les flexbox car j'avais d'autre bloc a placer et cela me semblait plus simple. Merci pour l'aide :D

Parent, enfant et largeur et hauteur en %

9 réponses