Résolu [WebDesign] DIV prendre toute la place dispo

Wazau

Wazau

ʇûoɐ ǝznop
Premium
Inscription
12 Août 2012
Messages
1 281
Réactions
283
Points
12 028
Bonjour,
Je suis entrain de créer le web design de mon site internet mais j'ai un soucis.
Ce site ce veut simple et épuré avec peu de contenu par page. Ainsi, le contenu des pages doit pouvoir tenir sur toute la résolution de l'écran.

C'est à dire :
-----------------------
HEADER ( w: 100% - h: 30px)
-----------------------


SECTION QUI DOIT PRENDRE TOUT LE RESTE DE LA HAUTEUR (w: 100%, h: le reste de px dispo)


-----------------------
FOOTER ( w: 100% - h: 90px)
-----------------------

Ce que je n'arrive pas a réaliser c'est que la partie section prennent toute la place disponnible entre le header et le footer.
Voici mon code css :

HTML: 
html, body {
    height: 100%
        width: 100%
}

body {
    min-width: 700px;
}

/* ---------------------------------------------------------------
    Entete
--------------------------------------------------------------- */
header {
    background:#37474f;
    color:#b0bec5;
    border-bottom: 3px solid #263238;
    height: 30px;
}

/* ---------------------------------------------------------------
    Corps
--------------------------------------------------------------- */
section {
    width: 100%;
    height: ???????????????????????????
    margin: 5px 0;
}

/* ---------------------------------------------------------------
    Pied
--------------------------------------------------------------- */
footer {
    position:fixed;
    bottom: 0px;
    width: 100%;
    height: 90px;
}

Merci d'avance pour votre aide !
 
Trier par date Trier par votes
D

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
160
Réactions
90
Points
1 566
Tu dois utiliser le vh
Code: 
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

header {
    width: 100%;
    height: 5vh;
}

section {
    width: 100%;
    height: 95vh;
}

ou alors tu utilises le position absolute pour que ça soit plus simple
Code: 
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

header {
    width: 100%;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

section {
    width: 100%;
    height: 100%; // ou 100vh
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 20px;
}
 
Cette réponse a aidé l'auteur de cette discussion !
Voter positivement 0 Voter négativement
D

Daniel.Dev

Membre
Inscription
29 Novembre 2016
Messages
160
Réactions
90
Points
1 566
Wazau a dit:
Merci beaucoup ta première solution fonctionne correctement !
(Néanmoins la seconde, ne semble pas fonctionner chez moi...)
Cliquez pour agrandir...
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
(vh)
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
(%)
 
Voter positivement 0 Voter négativement
Haut