Discussion :

[memento80]

Bonjour,

Je suis depuis quelques heures sur un problème d'affichage, peut être tout bête ou peut-être impossible à réaliser.

J'ai un bloc d'affichage contenant 3 autres blocs dont 2 masqués (display: none).
Je souhaiterais que ce bloc d'affichage ait la hauteur du bloc masqué le plus grand, l'idée étant de pouvoir afficher/masquer les différents blocs (navigation) sans que la hauteur du bloc d'affichage ne varie.

Bien sûr les hauteurs des 3 blocs ne sont pas connus car varient en fonction de la résolution de l'écran (responsive).
La largeur du bloc affiché doit prendre toute la largeur du bloc d'affichage.

Un petit schéma pour illustrer.



Merci d'avance pour votre aide.
Memento

[Doksuri]

essaye avec opacity:0; et opacity:1; a la place du display:none; et display:block;

[memento80]

Merci pour ta réponse.

Le opacity:0; sur les blocs contenus (combiné avec un flexbox sur le bloc d'affichage, alignement en ligne) permet effectivement de conserver la hauteur. Mais il prends la place en largeur également.
Même effet que le visibility: hidden; - il est masqué mais prend la place dans le bloc.

[NoSmoking]

Bonjour,
le fait de passer un élément en display:none le retire du flux, celui-ci n'a donc plus d'influence sur ses « frères », le comportement observé est donc normal.

Une solution pour t'en sortir est de jouer sur sa width et son overflow, sa hauteur affectera toujours ses « frères ».

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.flex-hidden {
  width: 0;
  overflow: hidden;
}

[memento80]

Bonsoir,

Merci pour cette aide.
Il me semblait avoir déjà essayé mais dans le doute j'ai recommencé selon cette idée.

La dimension de mes blocs « frères » sont déclarés comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.monBloc {
    flex:1 0 150px;
}

J'ai donc créé une classe à rajouter en JS pour le masquer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.monBloc.g-vhide {
    flex: 0 0 0px;
    overflow: hidden;
}

Note : "width: 0;" ne fonctionnant pas.

Mais non... Le bloc est bien masqué mais le fait de "l'écraser" lui fait mécaniquement augmenter sa hauteur (son contenu essayant de passer au maximum à la ligne) et lui donne une hauteur finale surdimensionnée.

S'il manque un truc pour éviter ce comportement, je ne vois pas quoi.

[Invité]

Bonjour,

au lieu de jouer aux devinettes : MONTRE tes codes HTML + CSS !

[memento80]

Bonjour,

Merci pour l'intérêt porté à mon sujet.

Je n'essaye pas de "jouer aux devinettes", j'essaye d'être le plus clair possible, d'où mon schéma et les explications. Si ce n'est pas assez clair, j'en suis désolé. Mais, pour ce cas de figure, si j'avais pu montrer directement le code, je l'aurais fait.
Sinon, je peux essayer de refaire un code exprès, épuré de tout le reste, afin de reproduire le même problème.

[mathieu]

Sinon, je peux essayer de refaire un code exprès, épuré de tout le reste, afin de reproduire le même problème.

c'est avec votre code de test que nous pouvons le mieux vous aider.
si vous n'avez pas un hébergement pour stocker le code de test, vous pouvez le mettre sur ce genre de site :
https://codesandbox.io/s/vanilla
https://jsfiddle.net/

[NoSmoking]

Mais non... Le bloc est bien masqué mais le fait de "l'écraser" lui fait mécaniquement augmenter sa hauteur (son contenu essayant de passer au maximum à la ligne) et lui donne une hauteur finale surdimensionnée.

j'avais mal appréhendé l'absence de hauteur fixe sur les éléments ce qui fait qu'effectivement cette solution, bien qu'excellente , ne peut pas fonctionner dans ton cas.

Si cette fois ci je ne me plante pas, tu cherches à faire ni plus ni moins qu'un « diaporama/slide », un seul élément affiché en même temps, indice les boutons sur le schéma, dans ce cas il existe une autre approche, toujours sur base de conteneur flex.

Le principe est le suivant :

• On se sert d'un conteneur flex comme fenêtre en n'affichant qu'un élément, le premier via un overflow:hidden, les éléments eux même étant en flex: 0 0 100%.
• Il suffit de changer l'ordre d'affichage des éléments avec order:-1 pour faire apparaître celui que l'on veut dans la « fenêtre ».

Fichier de test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diaporama with flex container</title>
<meta name="Author" content="NoSmoking">
<meta name="DVP-discussion" content="d2044087">
<style>
html, body {
  margin: 0;
  padding: 0;
  font: 1em/1.5 Verdana,sans-serif;
}
h1, h2, h3 {
  color: #069;
}
main {
  display: block;
  margin: auto;
  max-width: 60em;
}
.conteneur {
  position: relative;
  padding-bottom: 2em;
}
.flex {
  display: flex;
  margin: auto;
  max-width: 40em;
  border: 1px solid #ABC;
  overflow: hidden;
}
.flex > * {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: 1em;
}
.flex div:nth-child(1) {
  border: 1px solid #008;
  background-color: #DEF;
}
.flex div:nth-child(2) {
  border: 1px solid #800;
  background-color: #FDE;
}
.flex div:nth-child(3) {
  border: 1px solid #080;
  background-color: #EFD;
}
.flex div:nth-child(4) {
  border: 1px solid #840;
  background-color: #FED;
}
.check-1:checked ~ .flex div:nth-child(1),
.check-2:checked ~ .flex div:nth-child(2),
.check-3:checked ~ .flex div:nth-child(3),
.check-4:checked ~ .flex div:nth-child(4) {
  order: -1;
}
.conteneur {
  --check-width: 2em;
}
[name="check"] {
  position: absolute;
  bottom: 0;
  margin: 0;
  left: calc( 50% - var(--check-width) / 2);
  width: var(--check-width);
  cursor: pointer;
}
[name="check"]:nth-child(1) {
  transform: translateX(-150%);
}
[name="check"]:nth-child(2) {
  transform: translateX(-50%);
}
[name="check"]:nth-child(3) {
  transform: translateX(50%);
}
[name="check"]:nth-child(4) {
  transform: translateX(150%);
}
</style>
</head>
<body>
<main class="content">
  <header>
    <h1>Diaporama with flex container</h1>
  </header>
<div class="conteneur">
  <input type="radio" name="check" class="check-1">
  <input type="radio" name="check" class="check-2" checked>
  <input type="radio" name="check" class="check-3">
  <input type="radio" name="check" class="check-4">
  <div class="flex">
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tellus quis magna mollis tempor.
      <p>Vestibulum et pellentesque eros. Fusce consectetur consectetur lacus, sit amet malesuada tortor egestas in.
    </div>
    <div>
      <p>Vestibulum et pellentesque eros. Fusce consectetur consectetur lacus, sit amet malesuada tortor egestas in.
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tellus quis magna mollis tempor.
      <p>Nam eleifend orci quis tortor maximus pretium. Ut condimentum justo ac volutpat ultricies.
      <p>Nam gravida est magna, sit amet laoreet eros sagittis ut. Sed a dui nec enim efficitur feugiat ut non turpis.
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tellus quis magna mollis tempor.
      <p>Vestibulum et pellentesque eros. Fusce consectetur consectetur lacus, sit amet malesuada tortor egestas in.
      <p>Nam gravida est magna, sit amet laoreet eros sagittis ut. Sed a dui nec enim efficitur feugiat ut non turpis.
      <p>Nam eleifend orci quis tortor maximus pretium. Ut condimentum justo ac volutpat ultricies.
      <p>Praesent id nibh sed erat luctus bibendum. Duis in vestibulum velit. Mauris mattis lorem vitae posuere laoreet.
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tellus quis magna mollis tempor.
    </div>
    <div>
      <p>Nam eleifend orci quis tortor maximus pretium. Ut condimentum justo ac volutpat ultricies.
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in tellus quis magna mollis tempor.
      <p>Vestibulum et pellentesque eros. Fusce consectetur consectetur lacus, sit amet malesuada tortor egestas in.
    </div>
  </div>
</div>
  <p>Voir la <a href="https://www.developpez.net/forums/d2044087/webmasters-developpement-web/mise-page-css/hauteur-bloc-daffichage-contenu-masque/">discussion sur Developpez.com</a>
</main>
</body>
</html>

La démo en ligne :

↪ Diaporama with flex container

PS : même si je me suis encore planté l'exercice restait intéressant !

[memento80]

@mathieu : Merci pour les sites. Je les aurais utilisé (ou je ne manquerai pas de les utiliser) mais @NoSmoking semble avoir trouvé un système intéressant.

@NoSmoking : Oh oui, ça me semble pas mal du tout ça !
C'est là que je vois que j'ai encore une marge de progression pour bien utiliser tout ce qui est possible en CSS car j'ai parfois du mal à mettre en application certaines possibilités. Bravo.

Je vais décortiquer ça pour vérifier si j'ai bien compris le fonctionnement et je vais essayer de l'adapter à mon code.
Je ne manquerai pas de faire un retour ici même si cela fonctionne pour moi ou non.

Mais j'ai appris quelque chose en tout cas.

[Invité]

Je n'essaye pas de "jouer aux devinettes"

Sans vouloir te vexer...
Tu aurais montrer ton code DES LE DEBUT (flex...), tu aurais eu une réponse adaptée plus rapidement.

Donc : ?

[memento80]

Sans vouloir te vexer...

Pas de problème. Pas vexé, mais je trouve "marrant" le décalage entre le temps passé (perdu ?) sur un truc et le fait que l'on trouve que j'en ferais finalement un jeu de devinettes.
Je pensais avoir été le plus complet possible, il manquait effectivement peut-être l'histoire du flex mais je pataugeais plus dans la conception et l'utilisation du flex n'était, à l'origine, pas une obligation.

Grand respect à tout ceux qui participent à solutionner les problèmes des autres.

Pour le "Résolu", je ne manquerai pas de le cocher quand j'aurais pu tester la solution et l'adapter à mon contexte.

[memento80]

Comme prévu, j'ai adapté et testé... et ça marche au poil !

Merci beaucoup pour l'aide. Chapeau.