Forum Programmation.web scroll : la largeur du contenu ne s'adapte pas

Posté par  .
Étiquettes : aucune
0
8
août
2008

Bonjour,

je reviens avec encore une question HTML/CSS relative aux scroll & overflow...

J'ai un conteneur, de largeur fixe, et une barre de scroll si le contenu est trop large.

Le contenu n'a pas de largeur fixe.

Par défaut, le contenu prend la largeur du conteneur. Le texte du contenu dépasse, la scrollbar du conteneur apparaît.

Le problème, c'est que la taille du contenu reste à sa valeur originale, c'est à dire la largeur du conteneur sans scroll.

Moi, je voudrais que le conteneur ait toujours la largeur maximale, scroll compris.

Voici un exemple minimal :

    < html >
    £spaces£  £/spaces£< head >
    £spaces£      £/spaces£< style type="text/css" >
    £spaces£          £/spaces£#container { background-color: #00FF00; width: 150px; overflow: auto }
    £spaces£          £/spaces£#content { background-color: #FF0000; white-space: nowrap; }
    £spaces£      £/spaces£< /style >
    £spaces£  £/spaces£< /head >
    £spaces£  £/spaces£< body >
    £spaces£      £/spaces£< div id="container" >
    £spaces£              £/spaces£< div id="content" >Hello World Foo Bar Dev Null< /div >
    £spaces£      £/spaces£< /div >
    £spaces£  £/spaces£< /body >
    < /html >

et les captures d'écran associées :

image_perdue

image_perdue

Sur la deuxième capture, on voit que le contenu (fond rouge) a conservé la taille du conteneur (fond vert) avant scrolling.

Or je voudrais que le contenu s'élargisse au maximum.

J'ai essayé `width: 100%`, mais ça ne marche pas.

Merci d'avance pour vos suggestions !

  • # je comprend pas ton probleme

    Posté par  . Évalué à 1.

    tu as un texte fixe dans un contenant plus petit

    le contenant te propose de scroller pour voir la suite
    et c'est ce qu'il se passe

    tu scrolles de 6 caracteres à droite et ca enleve bien 6 caracteres à gauche.

    • [^] # Re: je comprend pas ton probleme

      Posté par  . Évalué à 2.

      Je me suis mal exprimé.

      En fait je voudrais que le contenu (div à fond rouge) s'étale complètement dans le conteneur. Autrement dit qu'il soit aussi large que le texte. C'est pour ça que je ne spécifie pas manuellement sa largeur en px...

      Sur le deuxième screenshot, d'après ce que je voudrais, le fond rouge devrait s'étaler jusqu'au bout, on ne devrait pas voir le fond vert du conteneur apparaître.

      • [^] # Re: je comprend pas ton probleme

        Posté par  . Évalué à 1.

        ne pas mettre de couleur differente entre le fond et la forme (contenu/contenant)

        voire ne pas mettre du tout de couleur et laisser la couleur du fond faire son travail

  • # min-width

    Posté par  . Évalué à 1.

    Et en jouant avec les propriétés CSS min-width / max-width ?

    • [^] # Re: min-width

      Posté par  . Évalué à 2.

      salut MilkaJinka,

      j'ai également essayé, mais ça ne suffit pas :s

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.