height: 100% funktioniert bei einem DIV nicht ... Seite bleibt leer

**d003232** · 10.06.2015, 12:38

Ich möchte ein Panoramabild im Fullscreen einbinden. Außerhalb von Contao hat das bisher funktioniert. Das soll nun auf einer Fullscreenseite innerhalb von Contao erfolgen, damit auch die Google-Analytic Daten und die Verwaltung einfacher erfolgt.

Der Code zum Einbinden des Fullscreen Panoramas:

HTML-Code:

<div id="pano" style="width:100%; height:100%;">piep</div>

Sobald ich bei der ID 'pano' statt height:100% irgend eine Angabe mit Pixeln mache, wird das Bild auch angezeigt. Das kann man im Debugging (Firebug usw.) gut nachvollziehen.

Hier der Testfall innerhalb von Contao:
http://neu.schwarzwald-ferienhaus-im...ullscreen.html

Und die Seite außerhalb von Contao:
http://schwarzwald-ferienhaus-imbirk...ullscreen.html

Wer hat einen Tipp, warum das height: 100% innerhalb von Contao nicht funktioniert ... oder wie ich sonst zu einem 100% Fullscreen innerhalb von Contao komme?

PS:

**Spooky** · 10.06.2015, 12:43

height:100%; bezieht sich auf die Höhe des Elternelements, allerdings muss das Elternelement hierfür eine fixe Höhe definiert haben. Damit #pano mit height:100%; auf die volle Höhe des Viewports aufgezogen wird, müsstest du auch allen diesen Elementen die Höhe 100%; geben:

PHP-Code:


<html>

    <body>

        <div id="wrapper">

            <div id="container">

                <div id="main">

                    <div class="inside">

                        <div id="panorama-fullscreen" class="mod_article first last block"

Alternativ könntest du auch #pano { height:100vh; } machen, allerdings brauchst du hierfür evt. auch JavaScript fixes für Browser die das nicht unterstützen oder wo die Unterstützung fehlerhaft ist.

**d003232** · 10.06.2015, 12:44

Zitat von Spooky

height:100%; bezieht sich auf die Höhe des Elternelements, allerdings muss das Elternelement hierfür eine fixe Höhe definiert haben.

Sorry ich verstehe es nicht? Kannst Du das nochmal anders sagen?

Aäm beziehungsweise habe ich html und body auch auf 100% gesetzt.

**Spooky** · 10.06.2015, 12:47

Siehe edit

**d003232** · 10.06.2015, 12:53

Cool es geht!!!

Ich habe nun die ganze Reihe auf 100% gesetzt (html, body, #wrapper, #container, #main, .inside, #panorama-fullscreen).

Ahh. Nun verstehe ich auch, warum das in der bisherigen externen Lösung quasi nicht erforderlich war. Da gab es nur html & body und die wurden beide auf 100% gesetzt.

Vielen Dank Dir für diesen superschnellen Tipp!!!

**Spooky** · 10.06.2015, 12:55

Kein Problem

Aber sieh' dir das nochmal mit height:100vh; an... die ganze Kette auf height:100%; ist keine besonders schöne Lösung, vor allem unflexibel bzgl. anderem Content.