Div Höhe automatisch an Browsergröße anpassen

NickSchnick99 · 21. Dezember 2020

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...

Mein Quelltext:

HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Spook Escapes</title>
    <style>
            .Oben {float:top; width:80%; border-width:1px; border-color: white}
            .Unten {float: bottom; width:80%; border:0}
            body {background-color: #424242; line-height: 220%; height: 100%}
            div {text-align: center}
    </style>
</head>
<body>
    <div><iframe class="Oben" src="TOben.html" height="200px" name="Oben"></iframe></div>
    <div><iframe class="Unten" src="Startseite.html" height="auto" name="Unten"></iframe></div>
</body>
</html>

Alles anzeigen

Das kann doch eigentlich nicht sooo schwer sein oder?

Vielen Dank für die Unterstützung!!

m.scatello · 21. Dezember 2020

Wieso benutzt du iFrames?

NickSchnick99 · 21. Dezember 2020

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

m.scatello · 21. Dezember 2020

Zitat von NickSchnick99

gefühlt das komplette Internet durchforstet.

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

HTML

<!DOCTYPE html>
<html>
<head>
<style>
html,body {
  height: 100%;
}
.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
    
.box {
   text-align: center;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
}
.box-1 {
  background-color: green;
  height: 200px;
}
.box-2 {
  background-color: blue;
  flex: 1;
}

</style>
</head>
<body>
<div class="container">
    <div class="box box-1">box 1</div>
    <div class="box box-2">box 2</div>
</div>
</body>
</html>

Alles anzeigen

AndreasB · 21. Dezember 2020

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

Oder hast du dir selber "zusammengereimt"?

Zitat von NickSchnick99

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):

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

.Oben {
    height: 200px;
}

.Unten {
    height: calc(100% - 200px);
}

Alles anzeigen

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

NickSchnick99 · 21. Dezember 2020

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

basti1012 · 21. Dezember 2020

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

<script>
function resizeIFrameToFitContent( iFrame ) {
    iFrame.width  = iFrame.contentWindow.document.body.scrollWidth;
    iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
    document.getElementById('iFrame').style.height=iFrame.height+'px';
} 
</script>
<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

Sempervivum · 21. Dezember 2020

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.

tk1234 · 21. Dezember 2020

Zitat von Sempervivum

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.

Keine Scripte, ein einfacher Header reicht. Aber Frames (dazu zählen auch iframes) möchte der OP ohnehin nicht verwenden.

basti1012 · 23. Dezember 2020

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,

Sempervivum · 23. Dezember 2020

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.

Div Höhe automatisch an Browsergröße anpassen

Jetzt mitmachen!

Teilen

Tags