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

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

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

11 ответов


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


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

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

использовать display:none является хорошим вариантом для удаления элемента, но это будет также удалена утилита для чтения с экрана. Есть также обсуждения, если это влияет на SEO. Есть хорошая, короткая статья на эту тему в списке только

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

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

Как это может быть также прочитано читателями экрана.

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


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


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


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

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

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

overflow:hidden

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


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


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

история о display:none и visibility: hidden

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

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


$('#abc').css({"display":"none"});

это скрывает содержимое, а также не оставляет пустого пространства.


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

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

дисплей:нет лучше всего, чтобы избежать захвата Белого пространства на странице