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

Question

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

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

Answer 1

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

Answer 2

Вместо этого используйте стиль

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

Answer 3

Переключение displayне допускает плавных переходов CSS. Вместо этого переключите обаvisibility и max-height.

visibility: hidden;
max-height: 0;

Answer 4

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

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

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

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

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

Answer 5

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

Answer 6

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

Рассказ о display:none а также visibility: hidden

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

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

Answer 7

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

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

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

overflow:hidden

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

Answer 8

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

Answer 9

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

Answer 10

Благодаря этому вопросу. Я хотел прямо противоположного, т.е. скрытый div должен по-прежнему занимать свое место в браузере. Итак, я использовал visibility: hidden вместо display: none.

Answer 11

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

Answer 12

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

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

Answer 13

Поскольку я устранял эту проблему и исследовал ее, я решил поделиться своим мнением. Если вы попали на эту страницу, я предполагаю, что вы пытаетесь выяснить, почему ваш элемент занимает место на вашей странице, даже если style.display = "none".

Скорее всего, причина этого НЕ в рассматриваемом элементе; но его ребенок, родитель или родной брат . Откройте консоль и перейдите на вкладку «Элементы». Поищите там подсказки относительно того, что может занимать место. Возможно, вы используете механизм шаблонов и не понимаете <br>рендеринг вне динамического <div>. Или, может быть, вам следует ориентироваться на более вложенный элемент. Попробуйте думать в этом направлении при устранении неполадок.

Answer 14

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

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

Answer 15

Использовать !important если вы вынуждены переопределить существующие стили CSS.

display: none !important;

Answer 16

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

Он скроет элемент, не занимая места:

      display: contents;

Проверьте поддержку браузера, так как это новая функция CSS.

Answer 17

Когда видимость установлена ​​на скрытую, единственный известный мне способ заставить ее не занимать место - это использовать а затем установите верхний, левый и т. д. параметры. Это не идеально, но работает.

Answer 18

если отображается: нет; не работает, нужно добавить clear: none;