Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1002 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°1803534
ledzep2
Posté le 23-10-2008 à 14:01:43  profilanswer
 

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

mood
Publicité
Posté le 23-10-2008 à 14:01:43  profilanswer
 

n°1803582
ledzep2
Posté le 23-10-2008 à 15:12:27  profilanswer
 

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
n°1803696
tpierron
Posté le 23-10-2008 à 17:12:26  profilanswer
 

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
n°1803720
ledzep2
Posté le 23-10-2008 à 18:02:23  profilanswer
 

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.

n°1803730
tpierron
Posté le 23-10-2008 à 18:28:46  profilanswer
 

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.

n°1803913
abais
Posté le 24-10-2008 à 10:29:03  profilanswer
 

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.
n°1804275
ledzep2
Posté le 24-10-2008 à 16:38:01  profilanswer
 

Heu bèh transitional on va dire ...

n°1804284
tpierron
Posté le 24-10-2008 à 16:47:30  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
flash redimension selon la fenetreRemettre une fenêtre au premier plan
BlindDown avec Scriptaculous et display none sur mon DIV[CSS] Div en Inline
Fichiers texte : taille maximale d'une ligne ?adapter taille police résolution
[PHP] Erreur conversion taille en Ko [Résolu]Div & Height changement progressif
systeme de sondage oui/non + fenetre pour commentaire ? 
Plus de sujets relatifs à : Div scrollable dans une div occupant au max la taille de la fenetre


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR