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
20 278
RGCoins
65
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
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
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
Oui cela ne change rien..
✎ Daniel a dit:
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.
(%)
Cliquez pour agrandir...
Si j'ajoute le footer cela ne fonctionne plus ^^'
 
Voter positivement 0 Voter négativement
Retour
Haut