✔ Iframe auf 100%-Height einstellen Problem

son gohan

son gohan

Erfahrenes Mitglied
Hallo grüß dich,

mit dem HTML Tag Iframe gibt es doch irgendein Problem.

Ich versuchte etliche mal mit HTML und CSS Angaben ein Iframe so ein zu stellen das es die Seite welche es includet immer komplett anzeigt, dabei schalte ich das scrollen für das iframe aus und wollte eigentlich das die komplette Seite angezeigt wird, aber das klappt nicht.

ich fand eine lösung mit Javascript welches das iframe hoch genug macht aber will kein javascript benutzen und denke jetzt ein Frameset benutzen zu müssen anstatt ein Iframe.

Das Problem kennt doch bestimmt jemand oder? Gibt es den schon zufällig Lösungen dafür wie man es doch hinbekommt?
 
Hi,

wie wäre es denn hiermit?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-01">
<title>tutorials.de | demo_son gohan</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
overflow:hidden;
}
html,body,iframe {
height:100%;
}
iframe {
width:100%;
}
-->
</style>

</head>
<body>

<iframe src="http://www.tutorials.de/"></iframe>

</body>
</html>


mfg Maik
 
Hallo, besten dank für das Beispiel.

Mein Problem ist, ich will ein Musikplayer starten sobald jemand meine Homepage betritt, soll der Musikplayer starten, wenn jemand eine Seite wechselt, soll der Musikplayer weiter laufen und nicht bei einem Seitenwechsel durcheinander kommen.

Daher habe ich mir gedacht, wenn ich ein Frame benutze kann ich die anderen Seiten der Homepage darein laden und den Musikplayer so immer laufen lassen.

Ich habe in dein Codebeispiel mein Musikplayer hinzugefügt, wie er mit rein müsste. Das Problem ist jetzt der Scrollbalken vom Iframe, ich will das die Seite insgesamt so aussieht wie ein ganzes Stück und ein kompletter scrollbalken für alles erscheint, das klappt so leider noch nicht, der scollbalken erscheint nur für das Iframe, sollte aber so aussehen wie der original scrollbalken vom browser.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-01">
<title>tutorials.de | demo_son gohan</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
overflow:hidden;
}
html,body,iframe {
height:100%;
}
iframe {
width:100%;
}
-->
</style>

</head>
<body>
<div style="height:300px;border:1px solid #000;">
<p>Musikplayer</p>
</div>
<iframe src="http://www.tutorials.de/"></iframe>

</body>
</html>
 
Vielleicht kommt dir dieses Modell, in Anlehnung an unser CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken, näher?

Code: 
<!-- put IE into Quirksmode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-02-01">
<title>tutorials.de | demo_son gohan</title>

<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html,body {
overflow:hidden;
}
html,body {
height:100%;
}
#playerBox {
height:300px;
border:1px solid #000;
position:relative;
z-index:2;
}
#iframeBox {
position:absolute;
left:0;
right:0;
top:302px;
bottom:0;
width:100%;
z-index:1;
}
iframe {
height:100%;
width:100%;
}
-->
</style>
<!--[if IE]>
<style type="text/css">
#iframeBox {
top:0;
height:100%;
border-top:300px solid #fff;
overflow:auto;
}
iframe {
overflow:hidden;
}
</style>
<![endif]-->

</head>
<body>

<div id="playerBox">
     <p>Musikplayer</p>
</div>
<div id="iframeBox">
     <iframe src="http://www.tutorials.de"></iframe>
</div>

</body>
</html>


mfg Maik
 
Hi, besten Dank! Ich hab mal ein Bild angehängt was es zeigen soll was ich meine.
Das Iframe includet die Homepageseite, jedoch geht der scollbalken nicht über die ganze Seite und so sieht es nicht gut aus.

Aber es ist auch logisch, weil das Iframe Element unter dem Playerbox Element anfängt und man es wohl nicht anders eingestellt bekommt. Optimal wäre wenn es am Ende so aussieht als ob es eine komplette Seite ist ohne Unterbrechung und das erreicht man nur wenn die Scrollbalken über die ganze Seit gehen.

Was ich jetzt für ein Lösung aufgeriffen habe im Internet ist eine Lösung mit Frameset, das obere Frameset wird auf 1 px höhe gestellt und das untere auf 100%, so verläuft ein kompletter Scrollbalken über die komplette Seite und im oberen Frame kann ein Flashplayer geladen werden der die Musik abspielt ohne das die sich bei Seitenwechsel wieder ändert.
 

Anhänge

  • beispiel.jpg
    beispiel.jpg
    59,2 KB · Aufrufe: 43
Hallo, besten Dank für die Hilfe. Ich habe das Beispiel von basic2.html benutzt und etwas probiert. Jedoch bekommt man es meiner meinung nach leider nicht hin so wie man es gerne hätte. Das head Element ganz oben kann man positionieren und der Scrollbalken rechts past auch optisch ins Bild, aber der Inhalt im Iframe wird vom head Element immer überdeckt und versucht man den Inhalt im Iframe mit CSS runter zu setzen, dann bekommt man wieder neue Probleme mit den Scrollbalken, dann tauchen aufeinmal zu viele Scrollbalken auf, also ich glaube daher insgesamt das es nicht möglich sein wird zur Zeit sowas hin zu bekommen, und habe auch im Internet beim suchen niemand gefunden der eine solche Lösung gefunden hat, wenn dich das aber motiviert zum experimentieren kannst du es probieren, es gibt sicher viele Leute die eine solche Löungen suchen würden, ich selbst glaube aber werde die Lösung mit frameset benutzen, weil es so momentan nur möglich scheint.


Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>

<style type="text/css" media="screen">
#printhead {display:none;}
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:80%;
font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#content {display:block; height:100%; max-height:100%; overflow:auto; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}


#head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:100px; background:#fff; font-size:4em; z-index:5; color:#000; border-bottom:1px solid #000;}



iframe {
height:100%;
width:100%;
}
</style>


</head>
<body>
<div id="printhead">www.s7u.co.uk - Cutting Edge CSS</div>
<div id="head">Header</div>
<div id="content">
<iframe src="http://www.tutorials.del"></iframe>
</div>
</body>
</html>
 
Mit dem iFrame wirst du dich wohl von deinem Vorhaben verabschieden müssen, dass der vertikale Scrollbalken sich über den kompletten Viewport des Hauptdokuments erstreckt bzw. mit ihm, der ja dann nicht mehr aus dem iFrame, sondern aus dem DIV #content stammt, der Inhalt des iFrames vollständig scrollbar ist; der untere Bereich der eingebundenen Seite wäre dann nämlich ab einen gewissen Punkt nicht mehr erreichbar.

Wenn du aber die Seiteninhalte per AJAX (Http-Request) direkt in das DIV #content lädst, lösen sich der ständige Reload der Multimedia-Datei und die Umsetzung des vertikalen Scrollbalken über die komplette Fensterhöhe von selbst in Luft auf - ohne iFrame, oder Frameset :-)

mfg Maik
 
Ja ich bin mir unsicher ob das mit Javascript was ja zu Ajax benötigt wird eine gute Lösung ist, wenn jemand das Javascript wieder abgeschaltet hat bringt es wieder nichts.

Hier ist aber mal ein Beispiel von meiner Frameset Lösung:
Code: 
<html>
<head>
<title>frameset</title>
</head>
<frameset rows="100%,*" framespacing="0" frameborder="0" border="0">
<frame src="#" name="content" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="auto">
<frame src="http://www.tutorials.de" name="modul" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no">
</frameset>
<noframes>
</noframes>
</html>

So könnte vielleicht ich meine Besucher mit endloser musik aus dem oberen Frame nerven und ganz schnell wieder von der homepage vertreiben :).
 
son gohan hat gesagt.:
Ja ich bin mir unsicher ob das mit Javascript was ja zu Ajax benötigt wird eine gute Lösung ist, wenn jemand das Javascript wieder abgeschaltet hat bringt es wieder nichts.
Zum Vergrößern anklicken....
Das ist wohl ein Argument, aber schau mal in den Zeiten des populären "Web 2.0", mit dem z.B. die "AJAX"-Technologie der breiten Öffentlichkeit erst richtig bekannt wurde, obwohl es schon seit Jahren existierte, in die Javascript-Statistik, wie schwindend klein der Anteil der Browser mit ausgeschalteten JS ist.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück