¿Cómo ocultar elementos sin hacer que ocupen espacio en la página?

228

Estoy usando visibility:hiddenpara ocultar ciertos elementos, pero todavía ocupan espacio en la página mientras están ocultos.

¿Cómo puedo hacer que desaparezcan totalmente visualmente, como si no estuvieran en el DOM en absoluto (pero sin eliminarlos del DOM)?

html css ripper234
fuente
Esta pregunta está muy muerta, pero estoy agregando un comentario porque recientemente me encontré en una situación que otros podrían experimentar. Necesitaba ocultar un elemento y mantenerlooffsetTop , y display:nonelo establecería offsetTopen 0. Mi solución aquí era usar, visibility: hiddenluego establecer el ancho y la altura en 0. Una vez que necesitaba volver a hacer visible el elemento, eliminé los tres atributos usando Javascript Una solución un poco hacky, pero funciona bien para casi todos los casos de uso.
rappatic

Respuestas:

302

Intente configurar display:nonepara ocultar y configurar display:blockpara mostrar.

Huusom
fuente
No es posible eliminar el elemento de dom man. usando esta opción también. lea la pregunta
Pranay Rana,
26
no todos los elementos deberían ser display: block, algunos tendrán que establecerse en display: inline(como <span>o <a>o <img>elementos DOM).
Mauro
2
@pranay la pregunta dice ocultarlos para no eliminarlos del DOM.
Mauro
66
@pranay: La pregunta no está muy bien expresada, pero Huusom está resolviendo el problema que tiene el usuario.
Claudio Redi
1
Una mejora: crear una clase CSS llamada hiddencon display: none. Agregue la clase a un elemento para ocultarlo, elimínelo show. Al eliminarlo, la displaypropiedad se restaura al valor predeterminado del elemento.
Alejandro C De Baca
44

usar estilo en lugar de

<div style="display:none;"></div>
Salil
fuente
1
Desafortunadamente, esto no funciona para mí, usando la pantalla: ninguno todavía deja un espacio en blanco.
mbuc91
15

Usar display:nonees una buena opción solo para eliminar un elemento PERO también se eliminará para los lectores de pantalla . También hay discusiones si afecta el SEO. Hay un buen artículo breve sobre ese tema en A List Apart

Si realmente solo quiere ocultar y no eliminar un elemento, mejor use:

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

De esta manera, también puede ser leído por lectores de pantalla.

La única desventaja de este método es que este DIV se procesa realmente y puede afectar el rendimiento , especialmente en teléfonos móviles.

alboth - undkonsorten.com
fuente
2
Si elige colocar algo absoluto con el que puede correr en la mayoría de los casos visibility: hidden;, digamos que tiene otros elementos absolutos que no tendrán un conflicto por el espacio, solo conflicto de z-index. Solo por ocultar un elemento con el que iríavisibility
Dejan.S
10

Mira, en lugar de usar el visibility: hidden;uso display: none;. La primera opción se ocultará pero aún ocupa espacio y la segunda opción se ocultará y no ocupará espacio.

Alejandro Nava
fuente
6

La respuesta a esta pregunta dice usar display: none y display: block, pero esto no ayuda a alguien que está tratando de usar transiciones CSS para mostrar y ocultar contenido usando la propiedad de visibilidad.

Esto también me volvió loco, porque el uso de la pantalla mata las transiciones CSS.

Una solución es agregar esto a la clase que usa visibilidad: 

overflow:hidden

Para que esto funcione depende del diseño, pero debe mantener el contenido vacío dentro del div en el que reside.

Omar
fuente
3
Si juegas con visibilidad: oculto y visibilidad: visible y establece la posición de tu elemento: arreglado, no tendrás ese problema, es como magia
John Balvin Arias
6

display: none is solution, eso oculta completamente elementos con su espacio.

Historia sobre display:noneyvisibility: hidden

visibility:hidden significa que la etiqueta no está visible, pero se le asigna espacio en la página.

display:nonesignifica que esconde completamente elementos con su espacio. (aunque aún puede interactuar con él a través del DOM)

Hidayt Rahman
fuente
4

Alternar displayno permite transiciones CSS suaves. En cambio, alternar tanto el visibilitycomo el max-height.

visibility: hidden;
max-height: 0;
Ahmad
fuente
Esto es útil cuando trabajas con animaciones. Porque estamos ocultando el elemento fuera del área visible usando algo como transform: translateX(-100%). No queremosdisplay: none
zhuhang.jasper
3

display:nonepara ocultar y configurar display:blockpara mostrar.

Pranay Rana
fuente
1
Pregunta sobre eliminarlo visualmente, "como si no estuvieran en el DOM". No se trata de eliminarlos del DOM real.
Arve Systad
la pregunta establece que no los elimine del DOM solo para hacerlos desaparecer. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@pranay: visibility: hiddensolo detiene la visualización del contenido, pero aún utiliza el espacio vertical / horizontal, pantalla: ninguno elimina el espacio vertical / horizontal del elemento.
Mauro
No, no lo hace. visibilidad: oculta; hace que el elemento sea invisible, pero aún ocupa espacio. pantalla: ninguno; hace que el documento se comporte como si nunca hubiera estado allí.
Olly Hodgson
1
Eliminar esta respuesta entonces.
BalusC
2

Aquí hay una opinión diferente sobre cómo volver a colocarlos después de la visualización: ninguno. no use display: block / inline, etc. En su lugar (si usa javascript) configure la visualización de la propiedad css en '' (es decir, en blanco)

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

Esto oculta el contenido y tampoco deja espacio vacío.

SanH
fuente
1

por encima de mi conocimiento es posible de 4 maneras

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

mostrar: ninguno es lo mejor para evitar el espacio en blanco en la página

Gil
fuente
2
Parece ser solo una repetición de las otras respuestas.
Pang
0

Úselo !importantsi se ve obligado a anular los estilos CSS existentes.

display: none !important;
jschnasse
fuente