Div scrollable dans une div occupant au max la taille de la fenetre

Div scrollable dans une div occupant au max la taille de la fenetre - HTML/CSS - Programmation

Marsh Posté le 23-10-2008 à 14:01:43    

Bonjour,  
Tout est dans le titre.
Voilà ce que je souhaiterai réaliser comme effet :
1-avoir une div cadre qui s'adapte automatiquement aux dimensions de la fenêtre en hauteur (sans javascript) et qui soit toujours centrée horizontalement.
2-à l'intérieur de cette première div avoir une div scrollable qui occupe une place définie dans le cadre et qui soit scrollable SI BESOIN EST.
 
Alors bon forcément j'ai tenté un truc !
La div cadre centrée automatiquement horizontalement, ça ça fonctionne bien.
Voici le code html :

Code :
  1. <body class="body_skin" onload=initAd() >
  2. <div id="main" class="main_div">
  3. <div id="display_div" class="display_div">
  4. <br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed<br/><br/><br/>ed
  5. </div>
  6. </div>


 
Et le ptit css qui va avec :
 

Code :
  1. body
  2. {
  3. margin: 0;
  4. background: #365265;
  5. font: 12px "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
  6. line-height: 1.5;
  7. color:#60789E;
  8. height: 100%;
  9. }
  10. .main_div
  11. {
  12. overflow: hidden;
  13. max-width: 60em;
  14. min-width: 820px;
  15. margin: 0.5em auto;
  16. padding: 10px 25px;
  17. border: 1px solid #ccc;
  18. }
  19. .display_div
  20. {
  21. overflow: auto;
  22. height: auto;
  23. width: auto;
  24. background: white;
  25. border-color: #1D2531;
  26. border-style: solid;
  27. border-width: 2px;
  28. margin-bottom :3px;
  29. }


 
Je ne vois pas de scroll et pour l'ajustement en hauteur ça ne marche pas.
 
Merci de votre aide !  :p

Reply

Marsh Posté le 23-10-2008 à 14:01:43   

Reply

Marsh Posté le 23-10-2008 à 15:12:27    

Donc ala :
 
http://bertonf.free.fr/sch.jpg
 
Donc en :
 
1- la page normale avec dans la div intérieure (bleue) un texte court.
 
2- la page normale avec dans la div intérieure (bleue) un texte long imposant l'apparition automatique d'un scroll (vert).
 
3- la page resizée (réduite) avec dans la div intérieure (bleue) un texte long imposant l'apparition automatique d'un scroll.
 
Euh c'est mieux ?


Message édité par ledzep2 le 23-10-2008 à 15:12:57
Reply

Marsh Posté le 23-10-2008 à 17:12:26    

Well, autant te prévenir tout de suite, ça va être la merde. Principalement parce que CSS n'a pas vraiment été prévu pour ça.
 
Primo, lorsque tu veux une hauteur relative à l'élément parent, tous (et absolument tous) les éléments parents doivent avoir soit une hauteur relative au parent ou alors fixe (en px, em, ...). Dans ton cas, ce sont les éléments : html, body, div#main, div#display_div, qui doivent avoir la propriété "height: 100%;". On voit direct qu'avec "width", c'est plus simple : il prend la place qui est libre.
 
Deuxio, en mode "standard compliant", une hauteur/largeur est définie comme la hauteur/largeur du contenu, plus l'épaisseur de la bordure, plus les marges, plus le padding. Et là c'est la merde.
 
Avec la largeur tu peux mettre deux div imbriqués, avec un width: auto et une marge sur le div interne pour avoir une boite de la largeur de ta fenêtre et une marge à gauche ou à droite. Avec la hauteur height: auto ne marche évidemment pas du tout comme width: auto (logique, le texte occupe d'abord toute la largeur, puis s'étale en hauteur).
 
Solution: le seul truc qui fonctionne pas trop mal, c'est de mettre un bout de javascript sur l'événement onresize et en calculant la taille des éléments à la main. Autant dire, qu'il y a intérêt à ce que ça en vaille la peine.
 
Edit: si ta zone rouge au dessus de ta zone bleue est fixe, tu peux aussi positionner ta zone bleue en absolute.


Message édité par tpierron le 23-10-2008 à 17:16:57
Reply

Marsh Posté le 23-10-2008 à 18:02:23    

Merci pour ta réponse !
Je pense remplacer la div interne par une iframe.
Je pense que ce sera plus simple et pis je pourrais executer du php à l'intérieur.

Reply

Marsh Posté le 23-10-2008 à 18:28:46    

Ah, ouais, effectivement j'avais aussi testé l'iframe, mais vaut mieux qu'il n'y ait pas trop d'interaction entre ta zone rouge et ta zone bleue (ce qui n'était pas du tout mon cas).
 
Lorsque tu manipules le DOM avec des iframes, certains navigateurs sont assez susceptibles (Safari notamment). D'un autre coté, s'il n'y a pas ou peu de javascript, ça ne devrait pas poser de problème particulier.

Reply

Marsh Posté le 24-10-2008 à 10:29:03    

euh... autant faire une mise en page au <Table>... ça sera moins pire qu'une iframe.... ton doctype est en STRICT ou en TRANSITIONAL ?
Dés que j'ai le temps, je fais un test, mais ça ne devrai pas poser de souci ce que tu demande....


---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.
Reply

Marsh Posté le 24-10-2008 à 16:38:01    

Heu bèh transitional on va dire ...

Reply

Marsh Posté le 24-10-2008 à 16:47:30    

Hmmm, j'en doute. Le overflow: auto sur un TD, ça fonctionne plus ou moins bien selon les navigateurs. Va donc falloir passer par un div et pour le faire utiliser la taille complète de la cellule (hauteur + largeur), ça va être la merde (sans javascript évidemment). Qui plus est, overflow: auto, merde vraiment grave avec IE. Genre place une table avec width:100%, ce gros con va te rajouter une scrollbar horizontale, s'il y a déjà une scrollbar verticale (au lieu de réduire la taille de la table). Pas de genre ce problème avec l'IFrame.
 
Cela dit, si tu trouves quelque chose, ça m'intéresse aussi. Point bonus si ça s'adapte en fonction du flux du texte (quelle que soit la taille de la fenêtre), et combo hi-score triple fatality si tu fais ça sans javascript.


Message édité par tpierron le 24-10-2008 à 16:53:45
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed