[Résolu] Conteneur étanche

Bonjour à tous

Parmi les nombreux points qui restent obscurs dans mon esprit, il y a les "conteneurs étanches".

Par ce terme, je veux dire: créer un bloc qui contient des éléments inline, de telle façon que ces éléments ne débordent pas de ce bloc, et -- réciproquement -- que des éléments inline qui le précèdent ne puissent pas y pénétrer.

J'ai compris qu'il fallait jouer sur la propriété overflow de ce bloc, mais sur certains navigateurs, Chrome en particulier, je vois apparaître des ascenseurs disgracieux à des endroits où cela n'est pas nécessaire, et surtout ce n'est pas ce que je désire faire.
En fait je voudrais que mes blocs soient des "conteneurs étanches élastiques", c'est à dire qu'ils prennent tout l'espace nécessaire pour que leur contenu ne déborde pas.
Les propriétés prévues pour overflow sont:
- visible: c'est le contraire de ce que je veux
- hidden: c'est le contraire de "élastique"
- scroll: ce n'est pas non plus ce que je désire
- auto: c'est ce que j'ai mis, mais, comme son nom l'indique, auto fait apparaître des ascenseurs dans certains cas, plutôt qu'agrandir le conteneur.

Je suppose qu'il existe une solution à ce problème, mais je ne l'ai pas trouvée.
Merci pour votre aide

Bonjour PapyJP,

Je ne suis pas sûr d'avoir compris exactement ce que tu veux, car je n'ai jamais entendu parler de "conteneur étanche".

Ce qui est sûr, c'est que la propriété "overflow" ne va pas empêcher les contenus de déborder de ton parent (seule exception si ces contenus sont des flottants, voir le comportement de "BFC").
Overflow indique tout simplement ce qui sera visible ou non quand il y a un débordement.

Si tu souhaites que ton parent occupe la taille de son contenu, les solutions sont celles-ci :
- sortir le parent du flux (position absolute, fixed, sticky, ou encore float) : généralement ce n'est pas une solution souhaitable
- modifier le display du parent (display: inline-block, ou display: table ou encore table-cell, inline-table, inline-flex, inline-grid, etc.)
- imposer une largeur (width) spécifique au parent, via les nouvelles valeurs proposées dans le module "Intrinsic & Extrinsic Sizing", malheureusement incompatible IE à l'heure actuelle : http://caniuse.com/#feat=intrinsic-width

Si ce n'est pas ce que tu voulais... alors il faudrait être plus clair (en tout cas avec moi )

Bonne journée !

Merci Raphaël

Hmm! j'ai du mal à comprendre pourquoi ce que je veux dire n'est pas clair, ce ne peut être que la façon dont je le dis.

Pour moi il s'agit de quelque chose de tellement simple et naturel qu'il n'est pas possible qu'il faille faille faire les pieds au mur pour obtenir ce résultat. Il doit y avoir un point que mon unique neurone n'a pas assimilé.

J'écris quelque chose comme

<section id="section1" class="etanche">
    ........................
</section>
<section id="section2" class="etanche">
    ........................
</section>
<section id="section3" class="etanche">
    ........................
</section>

Les sections sont sensées prendre toute la largeur de leur conteneur.
Le contenu des sections est pour l'essentiel une collection d'éléments inline (textes, images, inline-table, inline-block et autres).
Il ne doit pas y avoir de débordement de section 1 sur section 2 ou de section 2 sur section 3.
Si je mets un border dans mes sections cette bordure doit se mettre bien autour du contenu.
Et tout ça de façon responsive.

Pour moi ça devrait simplement se dire

section.etanche{display:block;}

(c'est à dire rien du tout, car c'est la valeur par défaut des sections) mais manifestement ça ne suffit pas à en faire un BFC, le contenu déborde. j'ai donc mis un overflow:auto; mais dans certains cas je vois apparaître des ascenseurs inutiles. Si ça existait ce serai "overflow:none", je suppose, c'est à dire "débrouille toi pour qu'il n'y ait pas de débordement".

J'ai beau me gratter la tête, il y a quelque chose qui m'échappe.
Modifié par PapyJP (17 Jan 2016 - 11:20)

Bonjour,

Si tu avais un exemple concret de débordement, ça nous aiderait.

Si ton contenu déborde, c'est que quelque chose l'oblige à déborder. Du coup, la solution me semble dépendre de la cause du débordement.

J'imagine par exemple :

<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</section>

et

section
{
	border-radius:1em;
	background:#fc9;
	padding:1em;
	white-space:nowrap;
}

Dans un tel cas, tu forces le texte à s'afficher sur une seul ligne et donc si la fenêtre n'est pas assez large, ça va déborder, le conteneur <section>, lui, ne pouvant être sans mesure particulière plus large que la fenêtre. Si tu veux que section entoure son contenu, ici, tu peux lui mettre simplement :

section
{
	display:inline-block;
}

Amicalement,

Bonjour,

Tu n'as pas par ailleurs dans ton code css quelque chose qui limite la hauteur de tes h2 ?

EDIT : je n'arrive pas à reproduire. Il doit y avoir un effet de bord dû à d'autres règles css que celles que tu nous montres.

Amicalement,
Modifié par parsimonhi (17 Jan 2016 - 18:23)

parsimonhi a écrit :
Bonjour,

Tu n'as pas par ailleurs dans ton code css quelque chose qui limite la hauteur de tes h2 ?

EDIT : je n'arrive pas à reproduire. Il doit y avoir un effet de bord dû à d'autres règles css que celles que tu nous montres.

Amicalement,

Tu as raison
Je laisse ce problème de côté pour le moment. Si ça se reproduit je prendrai les précautions nécessaires
Désolé de t'avoir fait perdre du temps.

Bonjour,

moins on utilise de height (et de max-height), moins cela risque d'arriver (pour ce H2, mieux vaut fixer font-size puis utiliser line-height et padding et enfin margin).
EDIT : il n'y en a pas dans le code présenté mais ça peut valoir le coup de jeter un coup d'oeil au reste du code
Modifié par Felipe (17 Jan 2016 - 23:29)

Felipe a écrit :
Bonjour,

moins on utilise de height (et de max-height), moins cela risque d'arriver (pour ce H2, mieux vaut fixer font-size puis utiliser line-height et padding et enfin margin).
EDIT : il n'y en a pas dans le code présenté mais ça peut valoir le coup de jeter un coup d'oeil au reste du code

Merci de ta réponse
Non, ce n'est pas ça, je ne mets de "(max-)height" que dans des pages qui sont des "slides" (photos avec titre, slideshows et autres gadgets de ce genre).

J'ai 3 environnements: le site réel, un environnement de mise au point et un environnement bac à sable.
Je travaille essentiellement avec Firefox, et mon correspondant (le propriétaire du site réel) avec Chrome et IE.

Le problème s'étant produit sur l'environnement de mise au point, j'ai simplement supprimé le header{overflow:auto;} pour régler le problème, puis j'ai recopié l'environnement sur le bac à sable pour rechercher les causes du problème à tête reposée.
Dans mon esprit, comme je l'ai dit en tête de ce fil, c'est dû à une mauvaise compréhension du fonctionnement des blocs et débordements.
Le résultat c'est que je n'arrive plus à reproduire le problème ni sur le bac à sable ni sur l'environnement de mise au point.
Comme quoi il faut (où il faudrait) toujours travailler professionnellement et ne pas sauter les étapes!

peut-etre un line-height + overflow avec une police inadaptée ou trop grande pour tenir sur l'interligne ? http://codepen.io/anon/pen/EPbPMK (produit une scrollbar dans chrome W7)


Modifié par gc-nomade (18 Jan 2016 - 15:35)

Bonsoir Cyrille
Je vais regarder, mais je ne pense pas. Je mets très peu de choses en absolu, car tant qu'à faire du nouveau, j'essaie de travailler le plus possible en relatif pour passer sur tablette et téléphone. Tout est en em ou %, sauf des border:1px ou 2px.
Quant aux ligne-height, c'est toi qui m'a fait comprendre leur importance pour le cadrage vertical, mais eux aussi je les mets en % de la largeur pour avoir des blocs de proportion donnée.
Bonne nuit!