Viewport und iframe von 100% auf Mobilgerät im Portrait-Modus

[SKB]

Hallo,
ich bin auf der Suche nach einem Problem für ein Responsive Design. Eigentlich relativ einfach - jedoch fallen mir keine Ideen mehr ein.

Ich würde gerne ein iframe mit einer Höhe von 100% auf meinem Galaxy S20+ darstellen wollen.
Jedoch wird die Seite mit:

<meta name="viewport" content="width=device-width,initial-scale=1,height=device-height">

initialisiert.

Somit wird leider im Portrait Modus nur der halbe Bildschirm gefüllt. Hat jemand vielleicht eine Idee, wie ich den iframe auf 100% bekomme?

Als CSS verwende ich Folgendes:

#detail_frame {
position:absolute;
min-width: 520px;
width: 100%;
min-height:100vh;
height:100vh;
height:100%;
top: 60; right: 0; bottom: 0; left: 10;
}

Vielen Dank!

[Sempervivum]

Mit deinem CSS füllt der iFrame bei mir die Höhe des Browserfensters aus. Allerdings habe ich es nicht mit dem Handy getestet sondern nur mit der Simulation im HTML-Inspektor.
Du hast jedoch Fehler im CSS: top, left etc. brauchen eine Maßeinheit wenn sie ungleich 0 sind also z. B. left:10px;

Versuche dieses CSS:

        html,
        body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        #detail_frame {
            width: 100%;
            height: 100%;
        }

[Megabyte]

Hi...

In deinem CSS hast du in einigen Zeilen ja bereits alle Varianten durchgespielt *lol*
Da CSS aber 'up-side-down' gelesen wird überschreibt eine nachfolgende Zeile die vorherige Zeile.
Heißt: dein '100vh' wird sofort vom folgenden '100%' wieder erschlagen.

iframes sind eigentlich immer viewport-relativ. Daher sollte 100vh hier richtig sein
(ohne es sofort wieder zu überschreiben *lol*)



<meta name="viewport" content="width=device-width,initial-scale=1">
Lass das height-Gedöns weg !!! Er holt sich da die 'Device'-Höhe, hat nichts mit viewport-Höhe zu tun...


html, body {
height: 100vh;
}

body {
margin: 0;
}

#detail_frame {
padding 0;
width: 100vw;
height: 100vh;
}

PS: Klick mal bei deinem Browser die Taste F12. Dann siehst du welche CSS-Anweisung auch tatsächlich
beim entsprechendem Element ankommt und angewandt wird...

Ist nur ein Versuch. Habe es hier nicht 'nachgebaut'...