28172 sujets

CSS et mise en forme, CSS3

Header de taille variable dans une page de taille fixe

Bonjour !

Voilà des jours maintenant que je me casse la tête, avec un projet en attente, pour la structure de ma page. Le problème paraît simple, et pourtant je commence à croire qu'il n'y a pas de solution. L'idée est la suivante:

- Une page fixe, donc qui ne scroll pas.
- En haut, un petit texte dont la hauteur n'est pas fixée (1, 2 ou 3 lignes)
- Un cadre qui occupe le restant de la page dans lequel se trouve un texte. Si ce texte est trop long, ça doit scroller à l'intérieur du cadre.

Pour vous donner une meilleur idée, j'ai fais quelques prise d'écran de ce que je voulais avoir en fonction des changements de longueur de texte et de résolution (en trichant et en modifiant mon code entre deux évidemment):
http://img200.imageshack.us/img200/926/image1io.png
http://img16.imageshack.us/img16/8366/image2zm.png
http://img179.imageshack.us/img179/5613/image3l.png

J'ai vraiment essayé tout ce que je pouvais imaginer, et jamais ça ne marche. J'avais même trouver une solution un peu sale avec des tables, mais ça ne fonctionnait que sous Chrome et Safari, ce qui ne représente pas un très large public Smiley lol

Je suis conscient que vous pourriez vouloir un bout de code de ma part, j'ajouterais volontiers ma solution boiteuse, mais j'ai pu constater sur les autres forums où j'ai posté mon problème que les gens tentaient juste de réparer ma solution. Je pense qu'elle n'est pas réparable.
Ce qu'il me faut c'est une nouvelle idée. Une façon d'organiser cette structure que j'ai décrit, si c'est possible. Je suis prêt à recevoir n'importe quel bidouillage pour que ça marche. Smiley langue

Merci d'avance Smiley smile
Hello, Smiley smile

Une solution toute simple qui doit marcher sur tous les navigateurs, mais qui impose une entête avec une hauteur définie :
<body>
     <div id="entete"></div>
     <div id="cadre"></div>
</body>
div#entete { height:15%; }
div#cadre { height:85%; overflow:auto; }
Si cette contrainte ne te pose pas de problème, on pourra fignoler cette ébauche avec quelques techniques pour centrer, aérer et mettre des bordures sur tes blocs.

Si tu tiens à la hauteur fluide, tu pourras utiliser javascript pour calculer la hauteur de #cadre en fonction de celle de #entete (hauteur #cadre = viewport - hauteur #entete). Grosse contrainte tout de même avec cette technique : les dimensions des blocs sont calculées au chargement de la page, donc si après tu t'amuses à redimensionner la fenêtre, tes blocs garderont leur taille initiale. Y a sûrement moyen de re-affecter de nouvelles valeurs en live (en détectant si la fenêtre est redimensionnée), mais là c'est encore autre chose...
Pour une en-tête de hauteur fixée je n'ai aucun problème Smiley smile
C'est bien la hauteur fluide qui m'embête. Et autant que possible j'aimerais le faire en CSS...
Mais je sens que je vais devoir passer au javascript. Smiley decu
Caduchon a écrit :
Mais je sens que je vais devoir passer au javascript. Smiley decu
Sans javascript, il te reste la solution des frames...
Hum! Pas idiot ça !
Mais les frame ne sont-elles pas dépréciées ? Ou bien c'est mon cerveau qui a inventé ça ?
Sujet clos
Aller à