✔ iframe height 100% -100px, Probleme mit Overflow

Status
Nicht offen für weitere Antworten.
A

andreasst

Mitglied
Also habe folgendes Problem, Ich verwende auf meiner Seite ein IFrame, dieses brauche ich, weil in diesem unter anderem AJAX Programme laufen, die nicht einfach mir include eingefügt werden können ohne sie neu zu schreiben.

Ich möchte, dass das IFrame fast die ganze Seite ausfüllt, bis auf einen Streifen am oberen Rand der mit einer fixen Höhe (100px) definiert ist.
Das bedeutet ich brauche eine Höhe von 100% minus 100px. Allerdings kann ich die CSS Eigenschaft position des IFrames nicht auf fixed oder absolute stellen, weil dann ein DropDown Menu, dass sich über das IFrame legt nicht funktioniert.(gilt nur! für das IFrame, also die DIVs können auch anders gesetzt werden)

Mein Ansatz verwendet daher DIV Container um das IFrame einzupacken, das funktioniert auch, nur dass innerhalb des IFrames nicht der gesamte Inhalt angesehen werden kann.

derzeitiges CSS
Code: 
@charset "utf-8";
/* CSS Document */
html,body
{

height:100%;
border:0;
max-height:100%;
overflow:hidden;
width:100%;
padding:0;
margin:0;
background-color:#0066FF;}
#WRAPPER
{
	display:block;
	height:100%;
	max-height:100%;
	overflow:auto;
	padding-top:100px;
	position:relative;
	background-color:#33FF00;
	
	padding-top:100px;

}
#CONTENT {
	
	width:100%;
  	height:100%;
	display:block;
  	background-color:#FF9933;
}
iframe{
	width:100%;
 	height:100%;
}

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/test.css">
</head>
<body>
<div id="WRAPPER">
<div id="CONTENT">
 <iframe src="test1.php" name="content_iframe" frameborder="no" scrolling="auto">Sorry, your browser does not support IFrames</iframe>
</div>
</div>
</body>

Zum ansehen gibts das ganze hier!
 
Hi,

du hast doch die Möglichkeit, den iFrame wie gewünscht im Viewport zu positionieren :)

Code: 
html,body
{
height:100%;
border:0;
max-height:100%;
overflow:hidden;
width:100%;
padding:0;
margin:0;
background-color:#0066FF;}

iframe{
         position:absolute;
         top:100px;
         bottom:0;
         left:0;
         right:0;
}
Code: 
<body>
    <iframe src="test1.php" name="content_iframe" frameborder="no" scrolling="auto">Sorry, your browser does not support IFrames</iframe>
</body>
Zum Test hab ich mal fix eines von Stu Nicholls' CSS-Dropdownmenüs in die Seite eingebunden, und konnte keine Einbußen bei der Usability feststellen - das Menü legt sich über den iFrame und ist in vollem Umfang nutzbar.

mfg Maik
 
Habe diese Variante probiert.
Allerdings funktioniert das nicht so ganz, wie es soll.

Die Plazierung funktioniert nicht richtig. siehe nächster Post
 
Zuletzt bearbeitet:
Hm, die Gecko-Browser (Firefox 2 + 3, Netscape 7.1, SeaMonkey 1.1.6) und Opera 9.27 erledigen bei mir ihren Job wie gewünscht, IE 6 + 7, Opera 9.5 und Safari hingegen kochen da ihr eigenes Süppchen, wobei man hier dem IE noch erfolgreich Nachhilfe geben könnte.

Aber lassen wir das, denn die anderen Browser lassen sich von diesen Hacks nicht beeindrucken.

Wenn du das Layout ohne iFrame umsetzen würdest, sähe die Welt gleich ganz anders aus, denn mein Vorschlag funktioniert bei einem DIV mit Ausnahme des IE6 in allen übrigen Browsern einwandfrei. Darum ging ich vorhin auch davon aus, dass es sich bei dem iFrame genauso verhält. :-(

mfg Maik
 
Sodele... ich stand wohl eben etwas auf der langen Leitung, aber jetzt wird alles gut :)

Code: 
html,body {
height:100%;
border:0;
max-height:100%;
overflow:hidden;
width:100%;
padding:0;
margin:0;
background-color:#FFFF66;
}

#content {
position:absolute;
top:100px;
bottom:0px;
left:0px;
right:0px;
}

* html #content { /* 'Star-HTML-Hack' Für IE */
top:0;
height:100%;
width:100%;
border-top:100px solid #FFFF66;
z-index:1;
}

iframe {
height:100%;
width:100%;
}
Code: 
<body>
      <div id="content">
           <iframe src="test1.php" name="content_iframe" frameborder="no" scrolling="auto">Sorry, your browser does not support IFrames</iframe>
      </div>
</body>
Wichtig hierbei, das Dokument muß dem IE 6 + 7 im Quirksmode übergeben werden.

mfg Maik
 
Verwende übrigens auch ein Menu das auf Stu Nicholls' CSS-Dropdownmenüs basiert.
All seine Menus und auch die die an denen angelehnt sind
funktionieren im IE im Quirks Modus nicht.

bzw meine Vermutung gute DropDown CSS Menus grundsätzlich nicht

Dein Vorschlag etwas adaptiert. Hauptproblem beim IE (hab mit IE7 getestet), IFrame Größe wird nicht entsprechen angepasst

Damit ihr seht, auf was ich in etwa hinwill:
Hier gehts zum Gesamtlayout

lg
Andreas
 
Wie gesagt, das Dokument muß dem IE im Quirksmode übergeben werden, dann klappt's auch mit der iFrame-Skalierung bis zum unteren Fensterrand - also beispielsweise so:

Code: 
<!-- put IE into Quirksmode -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Was das Dropdown-Menü von Stu Nicholls betrifft, empfehle ich dir als Alternative Suckerfish Dropdowns, die auch im Quirksmode einwandfrei funktionieren.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück