28172 sujets

CSS et mise en forme, CSS3

[INSOLUBLE] [CSS XHTML] Le retour des heigth 100%

Je vous fait un copier coller du message que j'ai fait sur harware.fr, etant donné que je n'ai pas réponse la bas:
Bonjour à tous,
Je travaille actuellement sur ceci: http://www.dacave.fr/LJDLM/contact.html et la css http://www.dacave.fr/LJDLM/css.css
Le site est composé d'un div emglobant tout, d'un div de corps en position relative, 2 div de bordure en posotion:absolute bottom 0, tous en height 100% tout comme mon body.
Comme vous pouvez le voir les boite n'arrivent pas jusqu'en bas de la page, comme je le souhaiterais, j'ai vu a de nombreux endroit qu'il fallait definir le html lui aussi avec une height de 100%
voila ce que ça donne: http://www.dacave.fr/caca/contact.html et la css: http://www.dacave.fr/caca/css.css
sur une grosse résolution ça semble marcher, mais des qu'il ya un scroll, ce qui es en dessous de la zone affichée au depart "sort" du design pour devenir sur fond blanc....
La deuxieme solution trouvée ici meme: un overflow:hidden avec des une margin bottom enorme et un padding bottom en equivalent negatif, le resultat: http://www.dacave.fr/caca2/contact.html la css http://www.dacave.fr/caca2/css.css : on ne peux plus scroller
Quelqu'un aurait-il une idée avant que je devienne fou svp?
Merci.
Modifié par Woulf (05 Jun 2008 - 09:44)
Administrateur
Woulf a écrit :
sur une grosse résolution ça semble marcher, mais des qu'il ya un scroll, ce qui es en dessous de la zone affichée au depart "sort" du design pour devenir sur fond blanc....

Hello,

Oui forcément puisqu'on ne le répète jamais assez : c'est du bidouillage car le média Web n'est pas paginé. En clair, ce n'est pas fait pour ce genre de choses, c'est aux concepteurs de s'adapter au média et non l'inverse.
J'ai du mal a comprendre le sens du mot paginer dans ce contexte, en tous cas merci de ta réponse.
Administrateur
Bonjour,

une page est (le recto ou le verso d')une feuille de papier, feuille qui a des dimensions physiques imposées et notamment une hauteur (29,7cm pour une feuille A4 par exemple). Si tu veux plus haut, il faut soit prendre du A3 soit prévoir une 2ème feuille de papier.
Une "page" web a une hauteur libre, qui dépendra en général du contenu. Par défaut, aucune limite de hauteur en tout cas Smiley cligne
C'est ce que je pensais, mais alors pourquoi le referent change dans le deuxieme exemple? (le 100% s'applique a la taille de fenetre de depart, sans prendre en compte le contenu).
Et en conclusion, il n'y a aucun moyen que mes fassent 100% de la fenetre avec ou sans scroll et je doit donc modifier mon design en consequence ou es ce que j'm'y prend mal?
Merci
Si c'est uniquement d'un point de vue esthétique, centre ton background et applique lui un repeat-y, le tour sera jouer ..

body {
  background: url('..') #ffffff center repeat-y;
}
Salut,

Et avec un tableau "des familles" 1 cellule
body, html {
margin: 0;
padding: 0;
height: 100%;
}

table{
 height: 100%;
}

tr, td{
height: 100%;

}

... le reste de ta css


<body>
<TABLE>
  <TR>
	<TD>
<div id="all">
.....
.....
</div>	
	
	</TD>
  </TR>
</TABLE> 
</body>


Ça ne le fait pas?
Suis pas un pro du table Smiley cligne mais bon
En effet titre edité :o
Pour le background il es blanc, et pour le table mon client n'en veux pas, merci quand mème de vos réponses.
Akhilleus a écrit :
Si c'est uniquement d'un point de vue esthétique, centre ton background et applique lui un repeat-y, le tour sera jouer ..

body {
  background: url('..') #ffffff center repeat-y;
}

Woulf a écrit :
Pour le background il es blanc

Smiley sweatdrop
Modifié par Akhilleus (06 Jun 2008 - 15:53)
Modérateur
bonsoir,

tu as eu quelques pistes (tableau qui applique un height:xx; comme un min-height , positionner ton fond dans un autre élement ...)

le dernier element qui me semble utile a couvrir l'ensemble de la page et a servir de reference est : #all.

teste donc en le mettant en min-height (+ !important si tu veut inclure IE6 ) et deplace y le fond que tu applique a #corps.

#corps ne devrait plus avoir de besoin de hauteur ni de fond , il peut vivre sa vie de div sans trop de contrainte Smiley smile .

..
le css a tester :
#all {
width : 1020px;
min-height : 100%;
height:auto!important;
height:100%;/*ie 6 */
margin : auto;
position : relative;
background-image : url(img/fond_box.jpg);
}



et pour corps

#corp {
width : 820px;
margin : 0 100px 0 100px;
}


GC
Sujet clos
Aller à