Wie kann ich Elemente ausblenden, ohne dass sie Platz auf der Seite beanspruchen?

228

Ich verwende visibility:hidden, um bestimmte Elemente auszublenden, aber sie belegen immer noch Platz auf der Seite, während sie ausgeblendet sind.

Wie kann ich sie visuell vollständig verschwinden lassen, als wären sie überhaupt nicht im DOM (aber ohne sie tatsächlich aus dem DOM zu entfernen)?

html css ripper234
quelle
Diese Frage ist sehr tot, aber ich füge einen Kommentar hinzu, weil ich mich kürzlich in einer Situation befunden habe, die andere möglicherweise erleben. Ich musste ein Element ausblenden und es beibehalten lassenoffsetTop und display:nonesetzte es offsetTopauf 0. Meine Lösung bestand darin visibility: hidden, die Breite und Höhe auf 0 zu setzen. Nachdem ich das Element wieder sichtbar machen musste, entfernte ich die drei Attribute mit Javascript. Eine etwas hackige Lösung, aber sie funktioniert für so ziemlich alle Anwendungsfälle.
rappatic

Antworten:

299

Versuchen Sie, die Einstellung display:noneauszublenden und display:blockanzuzeigen.

Huusom
quelle
Es ist nicht möglich, ein Element aus dem Dom zu entfernen. mit dieser Option auch. Lesen Sie die Frage
Pranay Rana
26
Nicht alle Elemente sollten vorhanden sein display: block, einige müssen auf gesetzt werden display: inline(z. B. <span>oder <a>oder <img>DOM-Elemente).
Mauro
2
@pranay die Frage sagt, sie zu verstecken, um sie nicht aus dem DOM zu entfernen.
Mauro
6
@pranay: Die Frage ist nicht sehr gut ausgedrückt, aber Huusom löst das Problem, das der Benutzer hat.
Claudio Redi
1
Eine Verbesserung: Erstellen Sie eine CSS-Klasse, die hiddenmit aufgerufen wird display: none. Fügen Sie die Klasse einem Element hinzu, um sie auszublenden, und entfernen Sie sie. Beim Entfernen wird die displayEigenschaft auf den Standardstandard zurückgesetzt.
Alejandro C De Baca
44

Verwenden Sie stattdessen Stil wie

<div style="display:none;"></div>
Salil
quelle
1
Leider funktioniert das bei mir nicht - mit Display: Keiner lässt noch ein Leerzeichen.
mbuc91
15

Die Verwendung display:noneist eine gute Option, um nur ein Element zu entfernen, ABER es wird auch für Bildschirmleser entfernt . Es gibt auch Diskussionen, ob es SEO beeinflusst. Es gibt einen guten, kurzen Artikel zu diesem Thema auf A List Apart

Wenn Sie wirklich nur ein Element ausblenden und nicht entfernen möchten , verwenden Sie besser:

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

So kann es auch von Screenreadern gelesen werden.

Der einzige Nachteil dieser Methode besteht darin, dass dieser DIV tatsächlich gerendert wird und die Leistung beeinträchtigen kann , insbesondere bei Mobiltelefonen.

alboth - undkonsorten.com
quelle
2
Wenn Sie sich dafür entscheiden, etwas Absolutes zu positionieren, mit dem Sie in den meisten Fällen laufen können visibility: hidden;, nehmen wir an, Sie haben andere absolute Elemente, die keinen Konflikt für den Raum haben, sondern nur einen Konflikt von z-index. Nur um ein Element zu verstecken, mit dem ich gehen würdevisibility
Dejan.S
10

Schauen Sie, anstatt Verwendung zu visibility: hidden;verwenden display: none;. Die erste Option wird ausgeblendet, nimmt aber immer noch Platz ein, und die zweite Option wird ausgeblendet und nimmt keinen Platz ein.

Alejandro Nava
quelle
6

Die Antwort auf diese Frage lautet "display: none" und "display: block". Dies ist jedoch nicht hilfreich für Personen, die versuchen, mithilfe von CSS-Übergängen Inhalte mithilfe der Sichtbarkeitseigenschaft anzuzeigen und auszublenden.

Das hat mich auch verrückt gemacht, weil die Verwendung von Display alle CSS-Übergänge beendet.

Eine Lösung besteht darin, dies der Klasse hinzuzufügen, die Sichtbarkeit verwendet: 

overflow:hidden

Damit dies funktioniert, hängt es vom Layout ab, aber es sollte den leeren Inhalt innerhalb des Divs behalten, in dem es sich befindet.

Omar
quelle
3
Wenn Sie mit Sichtbarkeit spielen: versteckt und Sichtbarkeit: sichtbar und Ihre Elementposition festlegen: behoben, werden Sie dieses Problem nicht haben, es ist wie Magie
John Balvin Arias
6

Anzeige: Keine ist Lösung, das verbirgt Elemente vollständig mit seinem Raum.

Geschichte über display:noneundvisibility: hidden

visibility:hidden bedeutet, dass das Tag nicht sichtbar ist, aber auf der Seite Platz dafür zugewiesen ist.

display:nonebedeutet, Elemente mit seinem Raum vollständig zu verbergen. (obwohl Sie immer noch über das DOM damit interagieren können)

Hidayt Rahman
quelle
3

display:nonezu verstecken und display:blockzu zeigen.

Pranay Rana
quelle
1
Er bittet darum, es visuell zu entfernen, "als ob sie nicht im DOM wären". Es geht nicht darum, sie aus dem eigentlichen DOM zu entfernen.
Arve Systad
Die Frage besagt, dass sie nicht aus dem DOM entfernt werden sollen, nur um sie verschwinden zu lassen. as though they are not in the DOM at all (but without actually removing them from the DOM)
Mauro
@pranay: Stoppt visibility: hiddennur die Anzeige von Inhalten, verwendet jedoch weiterhin vertikalen / horizontalen Raum. Anzeige: Keine entfernt den vertikalen / horizontalen Raum für das Element.
Mauro
Nein, tut es nicht. Sichtbarkeit: versteckt; macht das Element unsichtbar, nimmt aber trotzdem Platz ein. Anzeige: keine; Das Dokument verhält sich so, als wäre es nie da.
Olly Hodgson
1
Löschen Sie diese Antwort dann.
BalusC
2

Hier ist eine andere Sichtweise, wie Sie sie nach der Anzeige zurücksetzen können: keine. Verwenden Sie nicht display: block / inline usw. Setzen Sie stattdessen (wenn Sie Javascript verwenden) die Anzeige der CSS-Eigenschaft auf '' (dh leer).

Anurag Priyadarshi
quelle
2

Das Umschalten ermöglicht displaykeine reibungslosen CSS-Übergänge. Schalten Sie stattdessen sowohl das visibilityals auch das um max-height.

visibility: hidden;
max-height: 0;
Ahmad
quelle
1 
$('#abc').css({"display":"none"});

Dies verbirgt den Inhalt und lässt auch keinen leeren Raum.

SanH
quelle
1

Nach meinem Wissen ist dies auf vier Arten möglich

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

Anzeige: Keine ist das Beste, um Leerzeichen auf der Seite zu vermeiden

Gil
quelle
2
Scheint nur eine Wiederholung der anderen Antworten zu sein.
Pang
0

Verwenden !importantSie diese Option, wenn Sie gezwungen sind, vorhandene CSS-Stile zu überschreiben.

display: none !important;
jschnasse
quelle