Jak ukryć elementy bez zajmowania miejsca na stronie?

228

Używam visibility:hiddendo ukrywania niektórych elementów, ale nadal zajmują miejsce na stronie, gdy są ukryte.

Jak mogę sprawić, by całkowicie zniknęły wizualnie, jakby w ogóle nie były w DOM (ale bez faktycznego usuwania ich z DOM)?

html css ripper234
źródło
To pytanie jest bardzo martwe, ale dodaję komentarz, ponieważ niedawno znalazłem się w sytuacji, której mogą doświadczyć inni. Musiałem ukryć element , aby zachował swójoffsetTop , i display:noneustawiłbym offsetTopna 0. Moim rozwiązaniem było użycie, visibility: hiddena następnie ustawienie szerokości i wysokości na 0. Gdy potrzebowałem, aby element był ponownie widoczny, usunąłem trzy atrybuty za pomocą JavaScript. Trochę hacky rozwiązanie, ale działa dobrze dla prawie wszystkich przypadków użycia.
rappatic

Odpowiedzi:

301

Spróbuj ustawić, display:noneaby ukryć i ustawić, display:blockaby pokazać.

Huusom
źródło
nie można usunąć elementu z dom man. korzystając z tej opcji również. przeczytaj pytanie
Pranay Rana
26
nie wszystkie elementy powinny być display: block, niektóre będą musiały być ustawione na display: inline(takie jak <span>lub <a>lub <img>elementy DOM).
Mauro
2
@pranay pytanie mówi, aby je ukryć, aby nie usuwać ich z DOM.
Mauro
6
@pranay: Pytanie nie jest zbyt dobrze wyrażone, ale Huusom rozwiązuje problem użytkownika.
Claudio Redi
1
Ulepszenie: utwórz klasę CSS o nazwie hiddenwith display: none. Dodaj klasę do elementu, aby go ukryć, usuń go pokaż. Podczas usuwania displaywłaściwość jest przywracana do domyślnego elementu.
Alejandro C De Baca
44

zamiast tego użyj stylu

<div style="display:none;"></div>
Salil
źródło
1
Niestety nie działa to dla mnie - użycie displaya: żaden nie pozostawia pustego miejsca.
mbuc91
15

Użycie display:nonejest dobrą opcją tylko do usunięcia elementu, ALE zostanie ono również usunięte w przypadku czytników ekranu . Trwają również dyskusje, czy wpływa to na SEO. Jest dobry, krótki artykuł na ten temat na A List Apart

Jeśli naprawdę chcesz tylko ukryć, a nie usunąć element, lepiej użyj:

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

W ten sposób może być również czytany przez czytniki ekranu.

Jedyną wadą tej metody jest to, że ten DIV jest renderowany i może mieć wpływ na wydajność , szczególnie na telefony komórkowe.

alboth - undkonsorten.com
źródło
2
jeśli zdecydujesz się ustawić coś absolutnego, z czym w większości przypadków możesz biegać visibility: hidden;, powiedzmy, że masz inne elementy absolutne, które nie będą powodować konfliktu dla przestrzeni, tylko konflikt z-index. Tylko za ukrywanie elementu, z którym bym poszedłvisibility
Dejan.S
10

Spójrz, zamiast używać visibility: hidden;use display: none;. Pierwsza opcja się ukryje, ale nadal zajmuje miejsce, a druga opcja się ukryje i nie zajmuje miejsca.

Alejandro Nava
źródło
6

Odpowiedź na to pytanie brzmi: użyj display: none i display: block, ale to nie pomaga komuś, kto próbuje użyć przejść css do wyświetlania i ukrywania zawartości za pomocą właściwości visibility.

Doprowadziło mnie to również do szaleństwa, ponieważ użycie display zabija wszelkie przejścia css.

Jednym z rozwiązań jest dodanie tego do klasy korzystającej z widoczności: 

overflow:hidden

Aby to zadziałało, zależy to od układu, ale powinno zachować pustą zawartość w div, w którym się znajduje.

Omar
źródło
3
Jeśli grasz z widocznością: ukryty i widocznością: widoczny i ustaw swoją pozycję elementu: naprawiono, nie będziesz miał tego problemu, to jest jak magia
John Balvin Arias
6

display: żadne nie jest rozwiązaniem, to całkowicie ukrywa elementy swoją przestrzenią.

Historia o display:noneivisibility: hidden

visibility:hidden oznacza, że ​​tag nie jest widoczny, ale na stronie przydzielono mu miejsce.

display:noneoznacza całkowicie ukrywa elementy swoją przestrzenią. (chociaż nadal możesz z nim wchodzić w interakcje za pośrednictwem DOM)

Hidayt Rahman
źródło
3

display:noneukryć i ustawić display:blockdo pokazania.

Pranay Rana
źródło
1
Pyta o usunięcie go wizualnie, „jakby nie było ich w DOM”. Nie chodzi o usuwanie ich z rzeczywistego DOM.
Arve Systad
pytanie mówi, aby nie usuwać ich z DOM tylko po to, aby zniknęły. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@pranay: visibility: hiddenzatrzymuje tylko wyświetlanie treści, ale nadal wykorzystuje przestrzeń pionową / poziomą, display: none usuwa przestrzeń pionową / poziomą dla elementu.
Mauro
Nie, nie ma. widoczność: ukryta; sprawia, że ​​element jest niewidoczny, ale wciąż zajmuje miejsce. Nie wyświetla się; sprawia, że ​​dokument zachowuje się tak, jakby nigdy go nie było.
Olly Hodgson
1
Usuń tę odpowiedź.
BalusC
3

Przełączanie displaynie pozwala na płynne przejścia CSS. Zamiast tego przełączaj oba visibilityprzyciski max-height.

visibility: hidden;
max-height: 0;
Ahmad
źródło
Jest to przydatne podczas pracy z animacjami. Ponieważ chowamy element poza widocznym obszarem za pomocą czegoś podobnego transform: translateX(-100%). Nie chcemydisplay: none
zhuhang.jasper
2

oto inne podejście do przywracania ich po wyświetleniu: brak. nie używaj display: block / inline itp. Zamiast tego (jeśli używasz javascript) ustaw wyświetlanie właściwości css na '' (tj. puste)

Anurag Priyadarshi
źródło
1 
$('#abc').css({"display":"none"});

ukrywa to zawartość, a także nie pozostawia pustej przestrzeni.

SanH
źródło
1

powyżej mojej wiedzy jest to możliwe na 4 sposoby

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

wyświetlanie: żaden nie jest najlepszą rzeczą, aby uniknąć zajmowania białych stron na stronie

Gil
źródło
2
Wydaje się, że to tylko powtórzenie innych odpowiedzi.
Pang
0

Użyj, !importantjeśli jesteś zmuszony zastąpić istniejące style CSS.

display: none !important;
jschnasse
źródło