Div bei einer bestimmten Höhe des Browsers ausblenden

[Apolle]

Hallo, ich möchte ein div bei einer bestimmten Höhe des Browsers ausblenden. Wie kann man das machen? Gibt es dafür Tutorials, Vorlagen? Gruß Apolle

[JürgenB]

Hallo,

kennst du schon https://wiki.selfhtml.org/wiki/CSS/Media_Queries?

Und vielleicht verrätst du uns ja noch, was du mit dem Ausblenden erreichen willst.

Gruß
Jürgen

[Linuchs]

div bei einer bestimmten Höhe des Browsers ausblenden

Das geht mit CSS:

@media height: 800px {
  div {
    display: none;
  }
}

Wenn die Höhe genau 800px ist, werden alle divs ausgeblendet. Wenn du den Viewport in der Höhe veränderst, sind die divs bei 800px kurz weg und dann wieder da.

Den Sinn habe ich nicht verstanden.

[JürgenB]

Hallo Linuchs,

div bei einer bestimmten Höhe des Browsers ausblenden

Das geht mit CSS:

@media height: 800px {
  div {
    display: none;
  }
}

Wenn die Höhe genau 800px ist, werden alle divs ausgeblendet. Wenn du den Viewport in der Höhe veränderst, sind die divs bei 800px kurz weg und dann wieder da.

Den Sinn habe ich nicht verstanden.

aber den Unterschied zwischen height, min-height und max-height verstehst du schon?

Gruß
Jürgen

[MudGuard]

Hi,

Den Sinn habe ich nicht verstanden.

aber den Unterschied zwischen height, min-height und max-height verstehst du schon?

Linuchs versteht das schon, die Anforderung von Apolle war "bei einer bestimmten Höhe", nicht "ab einer bestimmten Höhe" oder "bis zu einer bestimmten Höhe".

Und den Sinn dieser Anforderung versteht Linuchs nicht - ich auch nicht wirklich.

cu,
Andreas a/k/a MudGuard

[Linuchs]

Und den Sinn dieser Anforderung versteht Linuchs nicht - ich auch nicht wirklich.

Wir werden dumm sterben, der Fragesteller ist wohl schon tot und kann nicht mehr Auskunft geben.

Aber die Vorlage für Satire musste ich einfach mitnehmen. Ihr habt's gemerkt, Test bestanden.

[Rolf B]

Hallo Linuchs,

Aber die Vorlage für Satire musste ich einfach mitnehmen.

Leider sind Dir beim Pudern die für @media nötigen Klammern aus dem Beutel gefallen... 😉

Rolf

[Linuchs]

Echt? Ich habe das aus meiner eigenen CSS-Datei abgekupfert und dachte, die Klammern sind wegen des AND

@media screen and (max-width: 800px) {
}

ja, Klammern auch ohne AND

@media (min-width: 800.1px) {  /* breites viewport */
}

wobei ich Abmessungen mit @media print noch nicht getestet habe.

[Rolf B]

Hallo Linuchs,

*mmmph* *mmuuummmmmm* *ptuf*

Ah, Knebel wieder weg.

Breiten gehören nicht in Pixel gemessen, sondern in em

Unabdingbarer Vorteil ist: Die Media-Abfrage skaliert mit den Vergrößerungseinstellungen des Users.

Nachteilig ist: Media-Bereiche mit (max-width: 50em) und (min-width: 50.1em) erzeugen einen undefinierten Bereich bei 50.05em

Irgendwann wird es wohl die Range-Syntax für Media-Queries nicht nur im Firefox geben (Chromium arbeitet zumindest dran) - bis dahin ist die sicherste Wahl, Mediabereiche zu stapeln.

/* Gemeinsame Styles */

@media (min-width: 40em) {
   /* Umbau für mittlere Breite */
}

@media (min-width: 60em) {
   /* Erneuter Umbau für große Breite */
}

Rolf

[JürgenB]

Hallo Andreas,

„bei“ einer bestimten Höhe war für mich Umganssprache für „ab“ einer bestimten Höhe. So wie das umgangssprachliche „oder“ eigentlich ein Exklusivoder ist.

Gruß
Jürgen

[Apolle]

Hallo, der Beitragschreiber ist noch nicht tot - war nur krank. Danke für den Tipp mit den mediaqueries. Werde es jetzt mal probieren.