Comment masquer des éléments sans les faire prendre de l'espace sur la page?

228

J'utilise visibility:hiddenpour masquer certains éléments, mais ils occupent toujours de l'espace sur la page lorsqu'ils sont masqués.

Comment puis-je les faire disparaître totalement visuellement, comme s'ils n'étaient pas du tout dans le DOM (mais sans les supprimer réellement du DOM)?

html css ripper234
la source
Cette question est très morte, mais j'ajoute un commentaire car je me suis récemment retrouvé dans une situation que d'autres pourraient rencontrer. J'avais besoin de cacher un élément et de le conserveroffsetTop , et display:noneje mettrais le offsetTopà 0. Ma solution ici était d'utiliser visibility: hiddenpuis de définir la largeur et la hauteur à 0. Une fois que je devais rendre l'élément visible à nouveau, j'ai supprimé les trois attributs en utilisant Javascript. Un peu d'une solution hacky, mais cela fonctionne bien pour à peu près tous les cas d'utilisation.
rappatic

Réponses:

302

Essayez de définir display:nonepour masquer et définir display:blockpour afficher.

Huusom
la source
il n'est pas possible de retirer l'élément de dom man. en utilisant également cette option. lire la question
Pranay Rana
26
tous les éléments ne devraient pas l'être display: block, certains devront être définis sur display: inline(tels que les éléments <span>ou <a>ou <img>DOM).
Mauro
2
@pranay la question dit de les cacher pour ne pas les supprimer du DOM.
Mauro
6
@pranay: La question n'est pas très bien exprimée mais Huusom résout le problème de l'utilisateur.
Claudio Redi
1
Une amélioration: créez une classe CSS appelée hiddenavec display: none. Ajoutez la classe à un élément pour le masquer, supprimez-le show. Lors de sa suppression, la displaypropriété est restaurée à l'élément par défaut.
Alejandro C De Baca
44

utilisez plutôt du style comme

<div style="display:none;"></div>
Salil
la source
1
Malheureusement, cela ne fonctionne pas pour moi - en utilisant l'affichage: aucun ne laisse encore un espace vide.
mbuc91
15

Utiliser display:noneest une bonne option pour supprimer simplement un élément MAIS il sera également supprimé pour les lecteurs d'écran . Il y a aussi des discussions si cela affecte le référencement. Il y a un bon article court sur ce sujet dans A List Apart

Si vous voulez vraiment juste cacher et ne pas supprimer un élément, mieux vaut utiliser:

div {
  position: absolute; 
  left: -999em;
}

Comme cela, il peut également être lu par des lecteurs d'écran.

Le seul inconvénient de cette méthode est que ce DIV est réellement rendu et qu'il peut affecter les performances , en particulier sur les téléphones mobiles.

alboth - undkonsorten.com
la source
2
si vous choisissez de positionner quelque chose d'absolu, vous pouvez dans la plupart des cas courir avec visibility: hidden;, disons que vous avez d'autres éléments absolus, ils n'auront pas de conflit pour l'espace, juste un conflit de z-index. Juste pour cacher un élément avec visibility
lequel j'irais
10

Regardez, au lieu d'utiliser visibility: hidden;use display: none;. La première option se cache mais prend toujours de l' espace et la deuxième option se cache et ne prend pas d'espace.

Alejandro Nava
la source
6

La réponse à cette question consiste à utiliser display: none et display: block, mais cela n'aide pas quelqu'un qui essaie d'utiliser des transitions css pour afficher et masquer du contenu à l'aide de la propriété de visibilité.

Cela m'a également rendu fou, car l'utilisation de l'affichage tue toutes les transitions CSS.

Une solution consiste à ajouter ceci à la classe qui utilise la visibilité: 

overflow:hidden

Pour que cela fonctionne, cela dépend de la mise en page, mais il doit conserver le contenu vide dans le div dans lequel il réside.

Omar
la source
3
Si vous jouez avec visibilité: caché et visibilité: visible et définissez la position de votre élément: corrigé vous n'aurez pas ce problème, c'est comme par magie
John Balvin Arias
6

affichage: aucun n'est une solution, cela cache complètement les éléments avec son espace.

Histoire display:noneetvisibility: hidden

visibility:hidden signifie que la balise n'est pas visible, mais de l'espace lui est alloué sur la page.

display:nonesignifie cache complètement les éléments avec son espace. (bien que vous puissiez toujours interagir avec lui via le DOM)

Hidayt Rahman
la source
4

Le basculement displayne permet pas des transitions CSS fluides. Au lieu de cela, basculez à la fois sur visibilityet sur max-height.

visibility: hidden;
max-height: 0;
Ahmad
la source
Ceci est utile lorsque vous travaillez avec des animations. Parce que nous cachons l'élément en dehors de la zone visible à l'aide de quelque chose comme transform: translateX(-100%). Nous ne voulons pasdisplay: none
zhuhang.jasper
3

display:noneà masquer et display:blockà afficher.

Pranay Rana
la source
1
Il demande de le supprimer visuellement, "comme s'ils n'étaient pas dans le DOM". Pas de les supprimer du DOM réel.
Arve Systad
question demande de ne pas les supprimer du DOM uniquement pour les faire disparaître. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@pranay: visibility: hiddenarrête uniquement l'affichage du contenu mais utilise toujours l'espace vertical / horizontal, display: aucun supprime l'espace vertical / horizontal pour l'élément.
Mauro
Non, ce n'est pas le cas. visibilité: caché; rend l'élément invisible, mais il prend toujours de la place. affichage: aucun; fait que le document se comporte comme s'il n'était jamais là.
Olly Hodgson
1
Supprimez ensuite cette réponse.
BalusC
2

voici une approche différente de leur remise après affichage: aucune. n'utilisez pas display: block / inline etc.

Anurag Priyadarshi
la source
1 
$('#abc').css({"display":"none"});

cela masque le contenu et ne laisse pas non plus d'espace vide.

SanH
la source
1

au-dessus de mes connaissances, il est possible de 4 façons

  1. HTML<button style="display:none;"></button>
  2. CSS #buttonId{ display:none; }
  3. jQuery $('#buttonId').prop('display':'none');& $("#buttonId").css('opacity', 0);
gdmanandamohon
la source
1

affichage: aucun n'est la meilleure chose pour éviter de prendre des espaces blancs sur la page

Gil
la source
2
Semble être juste une répétition des autres réponses.
Pang
0

À utiliser !importantsi vous êtes obligé de remplacer les styles CSS existants.

display: none !important;
jschnasse
la source