3
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:
die dazugehörende CSS-Datei sieht so aus:
an dieser Stelle:
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
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
Share on Facebook
Share on Twitter
Share on Reddit
Share on LinkedinPlease also mark the comments that contributed to the solution of the article
Content-Key: 475212
Url: https://administrator.de/contentid/475212
Printed on: April 23, 2024 at 06:04 o'clock
3 Comments
Latest comment
Sehr cool!
DANKE
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.
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.
1
