sandbox="allow-scripts" wirkt invers

[Gunnar Bittersmann]

@@mathefritz

( siehe 16.11.2016 23:21 )

Wenn du auf ein anderes Posting verweisen möchtest, dann tu das bitte. Mit einem Link. Ich hab das mal für dich gemacht.

gut, habe inzwischen bißchen experimentiert; die heigth des div werde ich wohl dynamisch zu Beginn und bei jedem resize-event, das gottseidank auch beim Zoomen ausgelöst wird, neu festlegen müssen, in Pixeln bestimmt aus innerer Fensterhöhe minus Höhe der "Tastatur"

Wenn du beim Layouten/Stylen an JavaScript denkst, tu das bitte nicht! Es ist in so gut wie allen Fällen mit CSS machbar.

So wie hier. Du willst einen Container (nennen wir ihn foo) über einem anderen (nennen wir ihn bar) plazieren. bar hat eine feste Höhe (sagen wir mal 12.345em), foo und bar sollen zusammen die Bildschirmhöhe ausfüllen (d.h. die Unterkante von bar soll an der Unterkante des Bildschirms liegen).

Das geht auf mehrere Arten. Die erste hast du selbst in Worten beschrieben: „innere Fensterhöhe minus Höhe der ‚Tastatur‘“. Minus kann ja CSS durchaus rechnen:

html,
body
{
  margin: 0;
  padding: 0;
  height: 100%;
}

#foo
{
  height: calc(100% - 12.345em);
}

#bar
{
  height: 12.345em;
}

Die andere, elegantere kommt sogar ohne feste Höhe von bar aus. bar ist so hoch wie es sein Inhalt erfordert; foo nimmt sich den Rest. Flexbox macht’s möglich:

html,
body
{
  margin: 0;
  padding: 0;
  height: 100%;
}

body
{
  display: flex;
  flex-flow: column nowrap;
}

#foo
{
  flex: 1;
}

LLAP 🖖