Bagaimana cara menyembunyikan elemen tanpa membuatnya mengambil ruang di halaman?

228

Saya menggunakan visibility:hiddenuntuk menyembunyikan elemen-elemen tertentu, tetapi mereka masih mengambil ruang di halaman sambil disembunyikan.

Bagaimana saya bisa membuat mereka benar-benar menghilang secara visual, seolah-olah mereka tidak ada di DOM sama sekali (tetapi tanpa benar-benar menghapusnya dari DOM)?

html css ripper234
sumber
Pertanyaan ini sudah sangat mati, tetapi saya menambahkan komentar karena saya baru-baru ini menemukan diri saya dalam situasi yang mungkin dialami orang lain. Saya perlu menyembunyikan elemen dan mempertahankannyaoffsetTop , dan display:noneakan menetapkan offsetTopke 0. Solusi saya di sini adalah menggunakan visibility: hiddenlalu mengatur lebar dan tinggi menjadi 0. Setelah saya perlu membuat elemen terlihat lagi, saya menghapus tiga atribut menggunakan Javascript. Sedikit solusi hacky, tetapi ini bekerja dengan baik untuk hampir semua kasus penggunaan.
rappatic

Jawaban:

302

Coba pengaturan display:noneuntuk menyembunyikan dan mengatur display:blockuntuk ditampilkan.

Huusom
sumber
itu tidak mungkin untuk menghapus elemen dari dom man. dengan menggunakan opsi ini juga. baca pertanyaan
Pranay Rana
26
tidak semua item harus display: block, beberapa harus diatur ke display: inline(seperti <span>atau <a>atau <img>elemen DOM).
Mauro
2
@ pray pertanyaannya mengatakan untuk menyembunyikan mereka agar tidak menghapusnya dari DOM.
Mauro
6
@ pray: Pertanyaan ini tidak diungkapkan dengan baik tetapi Huusom memecahkan masalah yang dialami pengguna.
Claudio Redi
1
Perbaikan: buat kelas CSS yang disebut hiddendengan display: none. Tambahkan kelas ke elemen untuk menyembunyikannya, hapus itu tunjukkan. Saat menghapusnya, displayproperti dikembalikan ke elemen default.
Alejandro C De Baca
44

gunakan gaya bukan suka

<div style="display:none;"></div>
Salil
sumber
1
Sayangnya ini tidak berfungsi untuk saya - menggunakan tampilan: tidak ada yang menyisakan ruang kosong.
mbuc91
15

Menggunakan display:noneadalah pilihan yang baik hanya untuk menghapus elemen TETAPI itu juga akan dihapus untuk pembaca layar . Ada juga diskusi jika efek SEO. Ada artikel pendek yang bagus tentang topik itu di A List Apart

Jika Anda benar-benar hanya ingin menyembunyikan dan tidak menghapus elemen, gunakan lebih baik:

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

Seperti ini dapat juga dibaca oleh pembaca layar.

Satu-satunya kelemahan dari metode ini adalah, DIV ini benar-benar dirender dan mungkin mempengaruhi kinerja , terutama pada ponsel.

alboth - undkonsorten.com
sumber
2
jika Anda memilih untuk memposisikan sesuatu yang absolut yang dapat Anda gunakan dalam kebanyakan kasus visibility: hidden;, katakanlah Anda memiliki elemen absolut lainnya yang tidak akan memiliki konflik untuk ruang, hanya konflik z-index. Hanya untuk menyembunyikan elemen saya akan pergi denganvisibility
Dejan.S
10

Lihat, alih-alih menggunakan visibility: hidden;gunakan display: none;. Opsi pertama akan bersembunyi tetapi masih membutuhkan ruang dan opsi kedua akan bersembunyi dan tidak memakan ruang.

Alejandro Nava
sumber
6

Jawaban untuk pertanyaan ini adalah mengatakan untuk menggunakan tampilan: tidak ada dan menampilkan: blok, tetapi ini tidak membantu bagi seseorang yang mencoba menggunakan transisi css untuk menampilkan dan menyembunyikan konten menggunakan properti visibilitas.

Ini juga membuatku gila, karena menggunakan display membunuh transisi css.

Salah satu solusinya adalah menambahkan ini ke kelas yang menggunakan visibilitas: 

overflow:hidden

Agar ini berfungsi tergantung pada tata letak, tetapi harus menyimpan konten kosong di dalam div tempatnya.

Omar
sumber
3
Jika Anda bermain dengan visibilitas: tersembunyi dan visibilitas: terlihat dan mengatur posisi elemen Anda: memperbaiki Anda tidak akan memiliki masalah itu, itu seperti sulap
John Balvin Arias
6

display: tidak ada solusi, Itu benar-benar menyembunyikan elemen dengan ruangnya.

Cerita tentang display:nonedanvisibility: hidden

visibility:hidden berarti tag tidak terlihat, tetapi ruang dialokasikan untuk itu pada halaman.

display:noneberarti sepenuhnya menyembunyikan elemen dengan ruangnya. (meskipun Anda masih dapat berinteraksi dengannya melalui DOM)

Hidayt Rahman
sumber
3

display:noneuntuk menyembunyikan dan mengatur display:blockuntuk ditampilkan.

Pranay Rana
sumber
1
Dia bertanya tentang menghapusnya secara visual, "seolah-olah mereka tidak berada di DOM". Bukan tentang menghapusnya dari DOM yang sebenarnya.
Arve Systad
pertanyaan menyatakan tidak menghapusnya dari DOM hanya untuk membuat mereka menghilang. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@ pray: visibility: hiddenhanya menghentikan tampilan konten tetapi masih menggunakan ruang vertikal / horizontal, tampilan: tidak ada yang menghilangkan ruang vertikal / horizontal untuk elemen.
Mauro
Tidak, tidak. visibilitas: tersembunyi; membuat elemen tidak terlihat, tetapi masih membutuhkan ruang. display: tidak ada; membuat dokumen berperilaku seolah-olah tidak pernah ada.
Olly Hodgson
1
Hapus jawaban ini.
BalusC
3

Beralih displaytidak memungkinkan untuk transisi CSS yang lancar. Alih-alih beralih baik itu visibilitydan max-height.

visibility: hidden;
max-height: 0;
Ahmad
sumber
Ini berguna saat Anda bekerja dengan animasi. Karena kita menyembunyikan elemen di luar area yang terlihat menggunakan sesuatu seperti transform: translateX(-100%). Kami tidak ingindisplay: none
zhuhang.jasper
2

inilah cara lain untuk mengembalikannya: tidak ada. jangan gunakan tampilan: blok / sebaris dll. Sebaliknya (jika menggunakan javascript) atur tampilan properti css ke '' (mis. kosong)

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

ini menyembunyikan konten dan juga tidak meninggalkan ruang kosong.

SanH
sumber
1

di atas pengetahuan saya adalah mungkin dalam 4 cara

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

display: tidak ada yang terbaik untuk menghindari ruang kosong pada halaman

Gil
sumber
2
Tampaknya hanya mengulangi jawaban yang lain.
Pang
0

Gunakan !importantjika Anda terpaksa mengganti gaya CSS yang ada.

display: none !important;
Jschnasse
sumber