Anfängerfrage: iframe Höhe an Fensterhöhe anpassen

Hallo,

ich versuche mich seit ein paar Tagen an HTML und CSS und würde gerne in einer Seite eine andere anzeigen lassen. Hierfür habe ich folgenden Code zusammengebastelt:

<!DOCTYPE html>

<html lang="de">  

	<head>
		<link rel="stylesheet" href="test.css">  
		<meta charset="utf-8">  
		<title>test</title> 
	</head>

	<body> 
	
		<!-- Ueberschrift -->
		<div class="headline">  
			<h1>Ueberschrift</h1>
		</div>
		
		<ul class="navbar">  
			<li><a href="./index.html">Startseite</a>  
		  	<li><a href="./Ziel01.html">Ziel 01</a>  
		  	<li><a href="./Ziel02.html">Ziel 02</a>  
		  	<li><a href="">Logout</a>  
		</ul>
		
	<div class="import">  
			<iframe
				src="https://wiki.selfhtml.org/wiki/Startseite"  
				style="width:100%; height:500px;"   
				name="test" scrolling="yes" frameborder="1" align=aus marginheight="0" marginwidth="0"  
			></iframe>
		</div>
		
		<!-- Signatur - nur der Vollständigkeit halber -->
		<address>Erstellt am 16.07.2019</address>

	
	</body>
</html>

die dazugehörende CSS-Datei sieht so aus:

html {
	height: 100%;
}

body {
    padding-left: 11em;	
	padding-right: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}

div.headline {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 1em;
	text-align: center;	
}


iframe.import {
	padding-left: 0em;
	padding-right: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	border: 1px solid black;
	box-sizing:border-box;
	height: auto;
	width:auto;
	max-height: 100%;
    max-width: 100%;
	display: block;
}


address {
    margin-top: 1em;
	padding-top: 1em;
    border-top: thin dotted;
	position: absolute;
	bottom: 1em;
	left: 1em;
	right:1em;
	font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
	font-size: 10px
}

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
	position: absolute;
	top: 2em;
	left: 1em;
    width: 9em
}

ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black;
}

ul.navbar a {
    display: block;
	padding: 0.4em;
	text-decoration: none; 
	font-weight: bold;
	border: 1px solid black;
	border-radius: 0px;
	box-shadow: 5px 5px 10px white inset;
	color: white; 
	background-color: grey; 
	transition: all .25s ease-in;	
}
  
ul.navbar a:focus,
ul.navbar a:hover,
ul.navbar li[aria-current] a:focus,
ul.navbar li[aria-current] a:hover {    
    color: white; 
    background-color: black;
}

a:link {
    color: black
}
a:visited {
    color: black
}

an dieser Stelle:

			<iframe
				src="https://wiki.selfhtml.org/wiki/Startseite"  
				style="width:100%; height:500px;"   
				name="test" scrolling="yes" frameborder="1" align=aus marginheight="0" marginwidth="0"  
			></iframe>

wird ja die fremde Seite eingebunden. Mit height:500px wird die Höhe des iframe festgelegt.

Ich hötte gerne, dass das iframe seine Oberkante da hat, wo sie jetzt ist, seine Unterkante etwas oberhalb von <address> und die Höhe sich mit ändernder Fenstergröße des Browsers ebenfalls ändert. Die Kirsche auf der Sahne wäre, wenn die Unterkante weiter oben ist, sofern die anzuzeigende Webseite eine geringere Höhe hat.

Kann mir jemand einen Hinweis geben, was ich tun muss?

Neugierige Grüße,
Andreas

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 475212

Url: https://administrator.de/contentid/475212

Ausgedruckt am: 25.11.2024 um 19:11 Uhr

3 Kommentare

Neuester Kommentar

https://jsfiddle.net/9sgb14ht/1/

Sehr cool!

DANKE

Freut mich, dass dein Anliegen gelöst wurde.
Ich möchte allerdings folgendes hinzufügen:

Je nach dem was du machen willst, ist ein iframe nicht mehr zeitgemäß.
Vor allem die Darstellung in mobilen Endgeräten macht oft Ärger.

Am Besten phpinclude oder Schnittstellen nutzen.