Discussion :

[Kahlyv]

Bonjour tout le monde,

Après moult recherches sur le sujet, je n'ai rien trouvé de concluent sur mon problème ... qui est le suivant :
Voici le CSS et l'HTML

CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.screen
{
width: 100%;
min-height: 100%;
}
.page
{
position: relative;
width: 1000px;
min-height: 100%;
background-image: url('images/fond_vertical_degrade.jpg');
background-repeat: repeat-y;
text-align: left;
}

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
<div class="screen" align="center">
        <div class="page">
 
                  Contenu plus ou moins long !!!!
 
        </div>
</div>

J'ai donc 2 divs imbriquées et qui sont censées faire 100% de hauteur toutes les 2 (il y a 2 divs pour des raisons de backgrounds, et mes HTML et BODY font également 100% de haut !).
Or, ma div contenant fait effectivement 100% de haut, mais pas le contenu.
Quand ma page dépasse la hauteur de l'écran, tout est OK, mais si mon contenu est plus petit, le bas de ma div contenu s'arrête au milieu et ne descend pas à 100%.

Je sais qu'il va falloir faire du hack pour IE6 et inférieur à cause de min-height mais je voudrais d'abord que ça marche sur FF et IE7

J'ai essayé plein de trucs mais je n'arrive à rien.

Merci de votre aide

[GihefBey]

Bonjour,

je voudrais d'abord que ça marche sur FF et IE7

Essaye de remplacer les min-height par des height

-

[Kahlyv]

Certes, bonne idée mais si je fais ça, mes 2 divs vont faire 100% de la hauteur de mon écran et point barre ... càd que si j'ai une page qui fait plus que la hauteur de l'écran, mes 2 divs s'arrêtent à une hauteur d'écran et si je scroll vers le bas, elle ne continuent pas.
J'étais parti de cette config avant de mettre min-height.
Merci tout de même pour ta réponse

[GihefBey]

Alors, regarde la solution proposée dans ce post.

Ça y ressemble.

-

[Kahlyv]

Merci pour le site de Stu que je ne connaissais pas (très sympa le jeu de labyrinthe en CSS ^^) mais malheureusement ça ne correspond pas exactement à ce que je veux faire, car dans son cas, il fait une en-tete et un pied de page fixes et seul le contenu est scrollable (c'est pourquoi il met des max-height et overflow:auto dans son CSS), alors que pour moi, il faut que tout soit scrollable (en-tete + contenu + pied de page ... d'où les min-height).
En fait, par rapport à toutes mes contraintes de design, le seul problème qu'il me reste à régler est :
pourquoi ma div "page" ne prend pas 100% de haut dans ma div "screen" (qui elle fait bien 100 % de tout ce qui est contenu à l'intérieur) ?
je rappelle le CSS, ce sera plus simple ^^

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.screen
{
width: 100%;
min-height: 100%;
}
.page
{
position: relative;
width: 1000px;
min-height: 100%;
background-image: url('images/fond_vertical_degrade.jpg');
background-repeat: repeat-y;
text-align: left;
}

[devyan]

Suite à un début de discussion démarrée hier (et pour laquelle je n'ai pas encore eu/pris le temps de faire des tests) il est possible que d'ajouter "position:relative;" à .screen puisse améliorer les choses

[Kahlyv]

Merci pour ton post devyan mais malheureusement je viens de tester et cela ne change rien, ma "page" ne prend toujours pas les 100% de hauteur de ma "screen"
Petite précision qui n'a pas (je pense) d'importance, mais sait-on jamais : dans ma div page, j'ai un tableau qui prend bien 100% de "page" !
Je continue de gratter ...
Merci pour votre aide

[devyan]

Petite précision;

Pour la solution dont je parlai le test est à réaliser avec height. (pas avec min-height.)

[Kahlyv]

OK pardon
Alors je viens de tester ça (je remets le code pour être sûr qu'on parle bien de la même chose)

Code :

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
 
.screen
{
position: relative;
width: 100%;
height: 100%;
}
.page
{
position: relative;
width: 1000px;
height: 100%;
background-image: url('images/fond_vertical_degrade.jpg');
background-repeat: repeat-y;
text-align: left;
}

mais ça me refait un trou entre le bas de mon écran avant de scroller, soit environ 800px vu ma résolution, et le pied de page qui lui se trouve plutôt vers les 1200px.
En fait, à partir du moment où je mets height tout court, la hauteur se "fixe" à la taille de mon écran en fonction de ma résolution, mais ne dépassera pas cette hauteur (c'est pour ça que j'avais pensé à des min-height plutôt !).

[devyan]

Regarde la réponse que je viens de faire à ce sujet similaire

[Kahlyv]

ah :/
par contre du coup, en absolute ou en fixed, on sort du flux (à moins que je me trompe) .... ça m'arrange pas tout ça !
j'avais justement tout fait en relative ou sans positionnement particulier pour que tout se mette bien les uns en dessous des autres et pas avoir de soucis de sortie de flux non voulu !!!
yaurait pas une formule magique du genre "mise-en-page-nickelle: true;" ^^ ?