Zum Inhalt springen

I-Frame 100% height

Erstellt am 13. Mai 2004 · 3 Antworten · letzte Antwort am 6. Januar 2005

Tags: Frage

Jesaja ·

Ich baue derzeit ein Intranet auf in welchem ich mittels I-Frame externen, sowie internen Content include. Das Ganze läuft logischweise über Typo3. Mit einer speziellen I-Frame extension plaziere ich den Content auf den Intranetseiten, dabei gelingt es mir aber seit Tagen nicht, dass das I-Frame unabhängig der Bildschirmauflösung immer eine Höhe von 100% hat. Kann mir jemand sagen, woran das liegt, bzw. wie ich dies hinbekommen könnte? Derzeit bleibt die Höhe immer ungefähr bei 250 Pixel hängen Unterhalb der KOMPLETTE Sourcecode, der I-Frame Teil ist im unteren Drittel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--
   This website is brought to you by Typo3 - get.content.right
   Typo3 is a free open source Content Management Framework
   created by Kasper Skaarhoej and licensed under GNU/GPL.
   Information and contribution at http://www.typo3.com
-->

<STYLE TYPE="text/css">
<!--
/* default styles for extension "tx_mininews_pi1" */
   .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-title { font-weight:bold; }
   .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser { margin-bottom:15px; }
   .tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-title { font-weight:bold; }
   .tx-mininews-pi1 .tx-mininews-pi1-fp_listrow P.tx-mininews-pi1-fp_listrowField-teaser { margin-top:0px; margin-bottom:10px; }
   .tx-mininews-pi1 .tx-mininews-pi1-singleView P.tx-mininews-pi1-singleViewField-teaser { font-style:italic; margin-top:5px; margin-bottom:10px; }
   .tx-mininews-pi1 .tx-mininews-pi1-browsebox P SPAN.tx-mininews-pi1-browsebox-strong { font-weight:bold; }
   .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A { color:black; text-decoration:none; }
   .tx-mininews-pi1 .tx-mininews-pi1-listrow P.tx-mininews-pi1-listrowField-teaser A:hover { color:black; text-decoration:none; }
/* default styles for extension "tx_gwtodofe_pi1" */
  .tx-gwtodofe-pi1 H2 { margin-top: 0px; margin-bottom: 0px; }
/* default styles for extension "tx_indexedsearch" */
   .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-button { width:100px; }
   .tx-indexedsearch .tx-indexedsearch-searchbox INPUT.tx-indexedsearch-searchbox-sword { width:150px; }
   .tx-indexedsearch .tx-indexedsearch-whatis P .tx-indexedsearch-sw { font-weight:bold; font-style:italic; }
   .tx-indexedsearch .tx-indexedsearch-whatis { margin-top:10px; margin-bottom:5px; }
   .tx-indexedsearch P.tx-indexedsearch-noresults { text-align:center; font-weight:bold; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title { background:#eeeeee; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title P { font-weight:bold; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-title P.tx-indexedsearch-percent { font-weight:normal; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-descr P { font-style:italic; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-descr P .tx-indexedsearch-redMarkup { color:red; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-info { background:#eeeeff; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-secHead { margin-top:20px; margin-bottom:5px; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-secHead H2 { margin-top:0px; margin-bottom:0px; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-secHead TABLE { background:#cccccc; }
   .tx-indexedsearch .tx-indexedsearch-res .tx-indexedsearch-secHead TD { vertical-align:absmiddle; }
/* default styles for extension "tx_newloginbox_pi3" */
   .tx-newloginbox-pi3-listrow TD { background-color:#eeeeee; padding-left: 3px; padding-right: 3px; }
   .tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-header TD { background-color:#cccccc; }
   .tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-header TD P { font-weight:bold; }
   .tx-newloginbox-pi3-listrow TR.tx-newloginbox-pi3-listrow-odd TD { background-color:#f6f6f6; }
-->
</STYLE>

   
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
   <style type="text/css" id="internalStyle">
      /*<![CDATA[*/
      BODY {   margin: 0 0 0 0; background-color: white; height:100%;}
      /*]]>*/

   </style>
   <LINK href="fileadmin/template/main/res/stylesheet.css" rel="stylesheet" type="text/css">

<title>I-Frame Tests</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="Typo 3.3 CMS">
<script language="javascript">
<!--
   browserName = navigator.appName;
   browserVer = parseInt(navigator.appVersion);
   var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);
   if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror") {version = "n3";} else {version = "n2";}
   function blurLink(theObject)   {
      if (msie4)   {theObject.blur();}
   }
// -->
</script>


</head>
<body bgcolor="#FFFFFF">


<table width="990" border="0" cellspacing="0" cellpadding="0">

<!-- Header image row: -->

  <tr>
      <td height="70" valign="top" id="header_1"><!--###header_1### begin --><table width="200" border="0" cellspacing="0" cellpadding="0">

        <tr>
          <td><A href="http://ziegler.klinik-schindlbeck.de/typo3_4/"><IMG src="fileadmin/template/main/images/headerimage.jpg" width="200" height="70" alt="" border="0"></a></td>
        </tr>
        <tr> <!-- Menu table cell: -->
          <td width="200" valign="top" id="menu_1"><div class="menu1-level1-act"><A HREF="index.php?id=372" onFocus="blurLink(this);">I-Frame Tests</A></div><div class="menu1-level1-no"><A HREF="index.php?id=89" onFocus="blurLink(this);">Suche</A></div><div class="menu1-level1-no"><A HREF="index.php?id=98" onFocus="blurLink(this);">Allgemeines</A></div><div class="menu1-level1-no"><A HREF="index.php?id=97" onFocus="blurLink(this);">Ärzte</A></div><div class="menu1-level1-no"><A HREF="index.php?id=96" onFocus="blurLink(this);">Pflege</A></div><div class="menu1-level1-no"><A HREF="index.php?id=95" onFocus="blurLink(this);">Abteilungen</A></div><div class="menu1-level1-no"><A HREF="index.php?id=92" onFocus="blurLink(this);">Hilfe & Rat</A></div><div class="menu1-level1-no"><A HREF="index.php?id=75" onFocus="blurLink(this);">Forum</A></div></td>

        </tr>
        <tr>
          <td width="200" height="64" valign="top" id="footer"><!--###footer### begin -->
   
    <p>&copy; Fabian Ziegler 2004</p><!--###footer### end --></td>
        </tr>
      </table><!--###header_1### end --></td>
    <td width="790" rowspan="5" valign="top" id="content"><a name="116"></a><DIV class="tx-sriframe-pi1"><iframe src="fileadmin/i-frame-test.php" width="100%" height="100%" style="width:100%;height:100%;" frameborder="1" scrolling="auto"></iframe></DIV></td>
  </tr>

  <tr>
 
    <td width="200" height="70" valign="top" id="header_1"><!--###header_1### begin -->&nbsp;<!--###header_1### end --></td>
   
   <!-- Page Content Area table cell: -->

  </tr>

</table>


</body>

</html>
tobstar ·

Ich denke ich kann Dir sagen, woran es liegt, aber ich kann Dir noch nicht sagen, was Du dagegen tun kannst, ich bin selber noch am ausprobieren.
Der Grund ist meiner Ansicht nacht, dass das längste andere Element auf Deiner Seite (bei mir ist es das Menü) nicht länger ist als die 250px und der iframe jetzt diese Länge als 100% ansieht. #evil#
Ich bin auch gerade dabei dies zu lösen, wenn Du eine Möglichkeit gefunden hast wäre ich froh wenn Du es mich wissen lässt.
Ich hab mir gedacht, vielleicht ist es möglich irgendwo in Typo das so einzustellen, dass das Element automatisch auf den kompletten Bildschirm verlängert wird, oder man kann irgendwelche clearpix automtisch erzeugen, habe das aber noch nicht geschafft...

Jesaja ·

Hab mit dem Autor ein wenig gemailt und wir haben die Lösung rausbekommen:

Hi Fabian,

Iframe heigth in % is buggy. It seems each browser has its own problems.

Try the following:
1. In the TS template setup of your page, add this line:
plugin.tx_sriframe_pi1._CSS_DEFAULT_STYLE = .tx-sriframe-pi1 { height:100%; }
2. Make sure all enclosing <table>-tags (in which your iframe is enclosed) have height="100%", either in the html template or through CSS stylesheets.

I think it should work with IE6 and Mozilla 1.5. The height is relative to the height of the browser window or any enclosing block.

Let me know if it works for you. If it does I will add the comment in the documentation.

Kind regards from Québec,

Stan

wersi77 ·

Bei mir funktionierts nicht!!!
Nur der IE nimmt die height 100% an aber der Firefox pendelt sich immer wieder auf ca. 200-250 px ein. Woran liegts???