Div Höhe automatisch an Browsergröße anpassen

  • Hallo zusammen,


    dieses ist mein erster Beitrag in diesem Forum und ich hoffe ich finde hier Hilfe:)


    Also: Ich habe ein Hauptseite, auf der 2 Divs übereinander sind. Der obere Div soll dabei immer 200px groß sein. Der untere Div soll den Rest der Seite ausfüllen, unabhängig davon, wie groß der Browser ist. Ich habe schon viel versucht und gefühlt das komplette Internet durchforstet. Leider bisher ohne Erfolg. Vielleicht kann mir ja hier einer helfen...:thumbup::thumbup:


    Mein Quelltext:

    Das kann doch eigentlich nicht sooo schwer sein oder?:/

    Vielen Dank für die Unterstützung!!

  • gefühlt das komplette Internet durchforstet.

    Das bezweifele ich sehr stark. Keine 10 Sekunden und schon einen Treffer gehabt:

  • ich bin neugierig: Wo hast du denn die Eigenschaften float: top und float: bottom her?

    Oder hast du dir selber "zusammengereimt"?


    Ich arbeite noch nicht so lange mit CSS...wie sähe denn eine Alternative aus?

    iFrames haben nichts mit dem Styling (CSS) zu tun. Sie sind Strukturelemente (HTML).

    Eine Alternative wären normale HTML Elemente ohne iFrame.



    Zu deiner ursprünglichen Frage:

    Da gibt es viele Möglichkeiten.


    Schau dir auf jeden Fall Flexbox an.


    Du kannst das aber auch zB so umsetzen (Das ist aber nicht so robust wie Flexbox):



    Außerdem hast du noch einige Fehler in deinem HTML, validier das mal.

  • Vielen Dank für eure Hilfe!


    m.scatello Wenn ich deine Lösung mit den Boxen übernehmen, wie füge ich dann andere Seiten in die Boxen ein. Durch meine iFrames konnte ich dann ja src= eingeben und dann verschieden Seiten einfügen. Geht das bei dem Box Befehl auch irgendwie?


    AndreasB Jaa, ich glaube die habe ich mir selber zusammengereimt. Ich gucke mir auf jeden Fall auch noch einmal die Flexboxes an.


    Ich bin da wirklich noch neu auf dem Gebiet und auch für Antworten auf "dumme" Fragen sehr dankbar!

    LG Niklas

  • Der Nachteil bei Iframes ist auch ,

    Wenn der Inhalt des Iframes wechselne Inhalte hat mit wechselne höhen und breiten wird das alles etwas komplizierter.

    Falls es von gleichen Server kommt ist das kein problem die höhe des Inhals auszulesen ,

    irgendwie so

    Code
    1. <script>
    2. function resizeIFrameToFitContent( iFrame ) {
    3. iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
    4. iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
    5. document.getElementById('iFrame').style.height=iFrame.height+'px';
    6. }
    7. </script>
    8. <iframe id="iFrame1" style="min-height:200px;width:100%" onload="resizeIFrameToFitContent(this)"src="irgendeas.html"></iframe>

    und das dann auf den Style anzupasen.

    Nachteil ist das es nicht mit Fremdseiten läuft, außer man umgeht die Cors.


    Wie es geht wurde dir ja aschon gesagt. Vieleicht kommt für dich auch ajax oder readfile in Frage.Damit du den Inhalt auch in die Flex Container bekommst

  • Zitat

    Nachteil ist das es nicht mit Fremdseiten läuft, außer man umgeht die Cors.

    Das trifft nicht ganz zu: Generell kann man sehr wohl Inhalte von Fremdseiten in iFrames anzeigen. Es ist nur so, dass Google und Co. das durch irgend welche Skripts unterbinden. Das hat aber nichts mit der SOP zu tun.

  • Das habe ich ich wohl irgendwie verwechselt.

    Wenn ich zb goggle im iframe laden will steht in der Console das

    Zitat

    Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

    Natürlich läßt sich das auch umgehen ,aber die Seiten sperren das nicht ohne Grund.


    Ich wollte in 7# eigentlich auch nur sagen das Iframes, die Links vom gleichen Server laden eigentlich ohne probleme an pass bar sind.

    Der Code in 7# sollte ohne Pfusch bei, Fremdlink ja eigentlich nicht Funktionieren,

    Richtug ??


    PS: An besten ganz auf Iframes,Frames verzichten,

  • Zitat

    Ich wollte in 7# eigentlich auch nur sagen das Iframes, die Links vom gleichen Server laden eigentlich ohne probleme an pass bar sind.

    Ups, da hätte ich etwas genauer lesen sollen: Deine Aussage bezog sich auf den Zugriff auf die Elemente innerhalb des iFrame und dafür trifft sie natürlich zu: Der Zugriff wird von den Browsern geblockt. Mein Posting bezog sich auf das Laden und die Anzeige einer Seite.