CSS 100% Höhe beim Div und Inhalt

[Zhen]

Hallo liebe community,
ich hab da ein Problem bei dem ich gerade irgendwie auf dem Schlauch stehe (schon lang nichts mehr webentwickelt [IMG]https://static.xx.fbcdn.net/images/emoji.php/v9/f51/1/16/1f603.png[/IMG]) und hoffe, dass die Experten unter euch mir helfen können.

Erstmal Erläuterung:
Ich hab ein DIV welches unbedingt die Mindesthöhe von 100% haben muss. Genau so hab ich die min-height auch angegeben. Die eigentliche height hab ich allerdings weggelassen. Nun befindet sich in diesem DIV ein IFRAME (google maps), welches eine min-height: 500px und eine height: 95% (95 % deswegen, weil im DIV auch noch ein h2 tag mit einer Überschrift vorhanden ist) hat.

Nun zum Problem:
Wenn ich beim DIV das height-Attribut mit 100% weglasse und nur die min-height behalte, dann ist zwar das DIV tatsächlich 100% hoch, aber der IFRAME hat nur seine Mindestgröße. Bei kleineren Auflösungen werden die nachfolgenden Elemente jedoch richtig angezeigt und auch der Inhalt dieses DIVS / IFRAMES.

Wenn ich nun beim DIV height: 100% angebe, dann hat der IFRAME die richtige größe bei größeren Auflösungen, aber wenn das Fenster dann in der Höhe kleiner ist als der Inhalt des DIVS, dann rutschen die nachfolgenden Elemente über die map.

Kennt jemand eine Lösung dafür?

Zwar könnte ich overflow:hidden einstellen, aber das ist leider nicht das was ich suche, da die map dann einfach hinter den Abgrenzungen vom DIV verschwinden würde.

Ich danke schon mal

 

[FranzvonAssisi]

Muss das div denn größer sein als 100%

und meinst du mit 100% Browserfenstergröße? Dann verwende doch die view-height und view-width Einheiten. Einfach statt height: 100% height: 100vh

Spart einem Ärger, weil es dann immer 100% des Browserfensters hat und nicht 100% vom Parent, wenn z.B. der html oder body nicht 100% hoch sind.

Lg

PS: Schick mal einfach nen Link zu ner Seite oder nem JSFiddle / Codepen o.ä., danke

 

[Zhen]

Ja genau ich meinte, dass das DIV 100 % von der Fenstergröße haben muss (bzw. mindestens 100%).

Der Plan ist halt, dass auf Laptops und Desktoprechnern im DIV die Überschrift eingeblendet wird und der restliche Platz vom Bildschirm mit der Map belegt wird.

Wenn jetzt aber die Seite auf nem Mobile Gerät angezeigt wird, dann soll die Überschrift angezeigt werden und die Karte eine Mindestgröße von 500px haben. Heißt im schlimmsten Fall, dass das DIV somit mehr als 100% vom Browserfenster hat (da der Inhalt ja größer bei kleineren Auflösungen).

https://codepen.io/anon/pen/WgEEXM

Ergänzung (5. September 2018)

Hab nun zwar das eigentliche Problem nicht gelöst, aber bin es nun mit der VH auf das IFRAME umgangen.

Hab ich vorher noch nicht gekannt. Vielen vielen dank für die Hilfe.


Dennoch würde mich natürlich interessieren, warum der IFRAME nicht die Höhe annimmt, wenn das darüber liegende DIV eine min-height, aber keine height Angabe besitzt. Falls also jemand die Lösung/Antwort kennt, dann wäre ich sehr dankbar, wenn man es hier posten würde