Как скрыть элементы, не занимая их место на странице?

Question

Я использую visibility:hidden, чтобы скрыть определенные элементы, но они по-прежнему занимают место на странице, пока они скрыты.

Как сделать так, чтобы они полностью исчезли визуально, как будто их нет в DOMвообще (но без фактического удаления их из DOM)?

Answer 1

Попробуйте установить display:none, чтобы скрыть, и display:block, чтобы показать.

Answer 2

используйте стиль вместо

<div style="display:none;"></div>

Answer 3

Использование display:none - хороший вариант, просто удалив элемент, НО он будет также удален для программ чтения с экрана . Есть также обсуждения, если это влияет на SEO. Хорошая короткая статья на эту тему в A List Apart

Если вы действительно хотите скрыть и , а не удалить элемент, лучше используйте:

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

Подобным образом это может быть также прочитано программами чтения с экрана.

Единственный недостаток этого метода заключается в том, что этот DIV фактически отображается и может повлиять на производительность , особенно на мобильные телефоны.

Answer 4

Посмотрите, вместо использования visibility: hidden; используйте display: none;. Первый вариант будет скрыт, но все равно займет место, а второй параметр будет скрыт, а не займет место.

Answer 5

Ответ на этот вопрос говорит об использовании display: none и display: block, но это не помогает тем, кто пытается использовать css-переходы, чтобы показать и скрыть содержимое с помощью свойства видимости.

Это также сводило меня с ума, потому что использование дисплея убивает любые CSS-переходы.

Одним из решений является добавление этого класса, который использует видимость:

overflow:hidden

Чтобы это работало, это зависит от макета, но оно должно содержать пустой контент внутри div, в котором он находится.

Answer 6

display:none, чтобы скрыть и установить display:block, чтобы показать.

Answer 7

дисплей: нет - это решение, которое полностью скрывает элементы с помощью своего пространства.

Рассказ о display:none и visibility: hidden

visibility:hidden означает, что тег не виден, но для него выделено место на странице.

display:none означает, что элементы полностью скрываются за своим пространством. (хотя вы все равно можете взаимодействовать с ним через DOM)

Answer 8

Вот другой способ вернуть их после отображения: нет. не используйте display: block / inline и т. д. Вместо этого (если используется javascript) установите для свойства css display значение '' (т.е. пустое)

Answer 9

дисплей: нет - это лучший способ избежать пробелов на странице

Answer 10

выше моих знаний можно 4 способами

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