28172 sujets

CSS et mise en forme, CSS3

Div qui refuse de s'étirer à 100%

Bonjour, je suis nouvelle sur ce forum.

Je n'arrive pas à faire descendre la zone content brown (marron) à 100% de la hauteur disponible de façon à la relier au footer. C'est peut être pas possible...


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<style>
* /* For CSS Reset */ 
{ 
padding: 0; 
margin: 0; 
} 
 
html, body 
{ 
width: 100%; 
height: 100%; 
} 
 
div#wrapper 
{ 
width: 100%; 
height: 100%; 
min-height: 100%; /* For Sticky Footer */ 
height: auto !important; /* For Sticky Footer */ 
margin: 0 auto -70px; /* For Sticky Footer */ 
} 
 
div#my_menu 
{ 
width: 100%; 
height: 50px; 
outline: 1px solid black; 
background-color: grey; 
text-align: center; 
position: fixed; 
} 
 
div#my_header 
{ 
width: 100%; 
height: 100px; 
outline: 1px solid black; 
background-color: yellow; 
text-align: center; 
padding-top: 50px; 
} 
 
div#content 
{ 
width: 960px; 
margin: 0 auto; 
outline: 1px solid black; 
background-color: brown; 
text-align: center; 
} 
 
div.content_columns 
{ 
width: 320px; 
outline: 1px solid black; 
background-color: gold; 
text-align: center; 
display: table-cell;
} 
 
div.clear_floats /* For Clearing Floats */ 
{ 
clear: both; 
} 
 
div#my_footer 
{ 
width: 100%; 
height: 70px; 
outline: 1px solid black; 
background-color: pink; 
text-align: center; 
} 
 
div.push /* For Sticky Footer */ 
{ 
height: 70px; 
} 
 
</style>
</head> 
<body id="index"> 
<div id="wrapper"> 
    <div id="my_menu"> 
    FIXED MENU WIDTH 100% 
    </div> 
    <div id="my_header"> 
    HEADER WIDTH 100% 
    </div> 
    <div id="content"> 
        <p>CONTENT 960px</p><!--
        --><div id="col1" class="content_columns"> 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        COLUMN 1 WIDTH 320px HEIGHT 100% 
        </div><!--
        --><div id="col2" class="content_columns"> 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        COLUMN 2 WIDTH 320px HEIGHT 100% 
        </div><!-- 
        --><div id="col3" class="content_columns"> 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        COLUMN 3 WIDTH 320px HEIGHT 100% 
        </div>
        <div class="clear_floats"></div> <!-- For Clearing Floats --> 
    </div> 
    <div class="push"></div> <!-- For Sticky Footer --> 
</div> 
    <div id="my_footer"> 
    STICKY FOOTER WIDTH 100% 
    </div> 
</body> 
</html>


Merci de m'avoir lue. Encore plus si vous avez un tuyau Smiley cligne
Bonjour,

Si c'est un problème de background-color, tu peux balancer la couleur que tu veux sur la #wrapper, body ou html par exemple.
Si c'est pas ça que tu veux, alors j'ai pas compris ta question... Smiley ohwell
Etirer le contenu afin que le footer soit toujours positionné en bas.

Donc, à partir de IE10, si html :
<body>
<dic class="content">
</div>
<footer class="footer">
</footer>
<body>

Alors pour le CSS :
body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}


Sinon, à partir de IE8 il faut utiliser display table.

De la lecture
Modifié par Olivier C (26 Aug 2015 - 18:41)
Bonjour Raphaël, bonjour Olivier,

Merci à tous les 2.

@Raphi : je t'aurai dit oui si j'avais un fond uni mais ce n'est pas le cas Smiley confused
@Olivier : j'ai essayé ton exemple mais je rencontre le même souci qu'avec mon code Smiley smile
Impossible d'étirer l'arrière plan, j'ai fait ceci :

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>Document Title</title> 
<style>
body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
} 

header {height:50px; background:blue;}
.page { background:gray; width:500px;}
footer {height:50px; background:pink;}

</style>
</head> 
<body>
<div class="content">
<header>header</header>
<div class="page">contenu de ma page</div>
</div>
<footer class="footer">footer</footer>
</body> 
</html>


Comment faire pour que la div class page colle au footer ? Si je mets une hauteur de 100% j'ai un scroll même avec peu de contenu Smiley decu
Modifié par callie (27 Aug 2015 - 09:55)
callie a écrit :
@Raphi : je t'aurai dit oui si j'avais un fond uni mais ce n'est pas le cas Smiley confused

C'est un background répété ? Ou un background à étirer ?
Si c'est un background à étirer, c'est une image ou un dégradé ?
Si c'est un dégradé tu peux le faire en css.
Si c'est une image à étirer, évite les déformations d'image, c'est moche (mais là on sort de la problématique je te l'accorde Smiley langue ).
coucou,

j'aimerai que la div class "page" (div couleur grise) s'étire jusqu'au footer (div rose) avec scroll si beaucoup de contenu et sans scroll si tout tient dans la page (et c'est là mon souci)

si je mets un 100% de haut à la "page", ça colle mais j'ai du scroll...

tu vois ce que je veux (dire) ?

callie
Bonjour,

C'est bien d'avoir mis du code en ligne. Il y avait une erreur de structure dans le html : il ne fallait pas mettre le <header> dans la div.content mais soit un élément frère des autres, afin que la solution plus haut puisse fonctionner (et en plus c'est plus logique sur un plan sémantique). Il y avait aussi quelques subtilités en css à ajouter.

Mais plutôt qu'un long discours, voici une page d'exemple avec votre code mis à jour : Layout sur CodePen
Modifié par Olivier C (28 Aug 2015 - 12:04)
La fonction calc() et les vh units aussi. Éléments essentiels pour la problématique qui nous occupe. En tout cas c'est comme cela que je l'ai résolu...
MatthieuR a écrit :
Oula, oui, pour le .page, j'avais pas fait gaffe...

Normal, j'ai réédité le code entretemps car il manquait cette fonction essentielle :
.page {
    min-height: calc(100vh - 20rem); /* les 20 rem, c'est pour tenir en compte les hauteurs cumulées du header et du footer */
    /* le reste du code */
}

Ce qui n'est tout de même pas très souple car il faut une hauteur fixe pour le <header> et le <footer>...
Modifié par Olivier C (28 Aug 2015 - 12:41)
Bon ça me travaillait ton histoire et flex est tellement bien pensé que j'étais presque sûr qu'on pouvait faire sans le min-height sur le .page, et je pense que la solution est de réappliquer un display: flex sur le parent de .page : le fork de ton pen
Je pensais que display: flex créait un héritage sur tous les descendants, mais j'ai dû me tromper.

EDIT : au passage, plus besoin de vh (quand on peut faire sans...)
Modifié par MatthieuR (28 Aug 2015 - 13:42)
Administrateur
MatthieuR a écrit :

EDIT : au passage, plus besoin de vh (quand on peut faire sans...)


Disons que l'avantage de vh est justement de se passer de la lourdeur de devoir déclarer height: 100% à toute la descendance depuis html jusqu'à l'élément final souhaité.

Ici ça va, il n'y en a pas trop Smiley cligne
Bonjour,

J'apprécie les efforts de chacun, c'est vraiment gentil.

Matthieu : ton code ne marche malheureusement pas sous IE.
Olivier : ton code marche bien mais quand je veux créer 2 colonnes dans ".page" je casse tout et je reviens à mon ancienne problématique à savoir la hauteur de "content" qui ne suit pas Smiley decu

Oulala j'ai l'impression que j'ai imaginé quelque chose d'irréalisable...
callie a écrit :
Oulala j'ai l'impression que j'ai imaginé quelque chose d'irréalisable...

Non pas, mais là je viens de déménager et -c'est balo - je n'ai pas encore internet sous la main, juste de quoi répondre avec mon mobile.

En gros : il faut faire la même démarche pour les colonnes que pour .page. Voilà pour la piste. Pour un exemple en ligne il faudra attendre un peu...

@matthieuR : note bien que j'ai utilisé un min-heigh et non simplement un heigh sur l'élément body. Sinon gare aux bugs si le contenu dépasse les 100% de hauteur...
Modifié par Olivier C (31 Aug 2015 - 08:14)
Sujet clos
Aller à