Discussion :

[Shadow69]

Bonjour a tous,

Je m'entraine actuellement sur de la réalisation de webApp en HTML5 / CSS et dans ce cadre j'essaie de me faire un client mail simple et sobre, le tout en faisant un peu de responsive design.
J'ai néanmoins un problème qui persiste et que je n'arrive pas a corriger seul. En effet au niveau du contenu du mail en lecture (partie de droite), je souhaite que celui ci fasse 90% de la hauteur restante dans le conteneur parent.
Cependant ce n'est pas le cas et il semblerai que mon texte descende beaucoup plus bas (assez génant quand l'ensemble de mon site est en position:fixed) et qu'il devient donc impossible de scroller pour voir le contenu).

Je souhaiterai résoudre ce problème avant de travailler sur la version responsive de mon projet, pourriez vous m'apporter un coup de main sur cela?

Voila mon avancée actuelle: http://www.codeyourweb.org/test/responsiveMails/
(fichier css à l'adresse suivante: http://www.codeyourweb.org/test/resp...ails/style.css)

Merci d'avance,

[rodolphebrd]

Bonjour,

pourquoi mettre "l'ensemble du site en position:fixed;" ?

[Shadow69]

Comme je l'ai dis, le but est de faire une webApp et du coup d'avoir un rendu dans le navigateur comme si on était dans une fenêtre d'application standard. Je ne souhaite donc pas de scroll possible dans la globalité de la page mais uniquement dans certaines zones de scrolling (listes de mails, contenu du message) pour faire défiler des éléments qui viendraient a dépasser des conteneurs de part leur longueur et ce, quel que soit la largeur/hauteur de la fenêtre.

[rodolphebrd]

Ce doit être lundi, ou moi (ou les deux) mais je n'arrive pas à capter exactement le résultat souhaité.

Peut-être avec un exemple...

[Shadow69]

Je me suis peut-être mal exprimé. Pour faire simple, quand je réduis volontairement la taille de la fenêtre (http://www.codeyourweb.org/test/responsiveMails/bug.png) une scrollbar apparait et je peux scroller le contenu du mail. Néanmoins le texte ne se scroll pas jusqu'au bout, comme si le texte "dépassait" de son conteneur.

Ce que je souhaite:
- je veux que la div qui contient le corps du message (#mailContent) fasse 90% de la hauteur entre le séparateur (juste après les options de répondre, répondre a tous...) et le bas de la page. Au niveau de la taille, je veux a tout prix que cela soit représenté en pourcentage afin d'être toujours adapté a la hauteur de la fenêtre, meme si l'utilisateur réduit manuellement cette taille.

Au niveau du CSS actuel le conteneur à les paramètres suivant:

Code :

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

1
2
3
4
5
6
7
8
#mailContent{
	position: relative;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 20px;
	height: 90%;
	overflow: auto;
}

[Candygirl]

Bonjour,

Ce qui arrive est normal vu que tu mélanges pixels et pourcentage. En donnant un hauteur de 90% + les 100 pixels du top + les 20px de padding, tu dépasses le 100% si la hauteurs n'est pas assez importante.

Quelques pistes:

- jouer avec la propriété box-sizing, mais attention, elle n'est pas encore finalisée et nécessite encore l'utilisation d'un préfixe notamment sur Firefox

- utiliser un positionnement absolu pour ton mailContent avec un top:120px; right:0;bottom:0 et left 350px; (et ajouter un right:0 sur #content)

- Tu attribues une hauteur en % à ton #option et tu rajoutes éventuellement une imbrication pour l'ajout de tes padding verticaux

Je rajouterais juste que de donner des hauteurs en pixels pour des éléments contenant du texte n'est pas une très bonne idée niveau accessibilité...