CSS Browserhöhe anpassen

huhn90

Hallo liebe Leute.
Ich habe ein Problem bezüglich einer Homepage die ich erstellen möchte.
Ich möchte, dass meine Homepage sich in der Länge dem Browser des Nutzers anpasst.

Nach Tagelangen suchen und hunderten getesteten Möglichkeiten bin ich zu dem Entschluss gekommen, meine Frage hier zu veröffentlichen.
Wie schaffe ich es, dass meine Seite sich in der Länge an den Browser des Nutzers anpasst.
Nur der "Frame" #main_1 soll sich in der Höhe anpassen. Der Rest soll konstant bleiben.
Es Funktioniert auch alles, nur nicht die Anpassung von #main_1.

Vielen Dank im voraus

PHP

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="formate.css">
<?php 
//include("inhalt.php");
?>
<meta charset="utf-8">
<title>Frage</title>


<style type="text/css">
 
html,body {
    margin:0;
    padding:0;
   min-height: 100%;
   height:auto !important;
   height:100%;
    /*height:600px; /* braucht es für die min-height des Containers */
}
#container {
width: 1140px;
margin: 1px auto;
padding: 0 42px;
   min-height: 100%;
   height:auto !important;
   height:100%;
/*height:auto !important;*/
/*background-repeat: no-repeat;
background-position: center 0px;
position:relative;*/
}
 
#header_oben {
 background-image:url(Bilder/header_oben.gif);
 float:left;
 width:1140px;
 height:200px;
}


#header_links{
 background-image: url(Bilder/header_links.gif);
 width: 600px;
 height: 114px;
 float: left;
}
 
#header_unten_2 {
 width: 120px;
 height:52px;
 float:left;
 background-image:url(Bilder/header_unten_2.gif);
}
#links_2 {
 width: 420px;
 height: 52px;
 background-image: url(Bilder/links_2.gif);
 float: left;
}


#main_3{
 width:540px;
 height:62px;
 background-image:url(Bilder/main_3.gif);
 float:left;
}
 
[COLOR=#ff0000]#main_1 {
 width: 1140px;
 /*height:686px;*/
 /*height:600px;*/
   /*min-height: 100%;
   height:auto !important;*/
   height:100%;
 background-image: url(Bilder/main_1.gif);
 float: left;
}[/COLOR]
#unten_rand {
 width:1140px;
 height:1px;
 background-image:url(Bilder/unten_rand.gif);
 float:left;
}
#bg{
 width:100%;
 height:100%;
}
body {
 background-image: url(Bilder/bg/bg.png);
 background-color: #8E8E8E;
    min-height: 100%;
   height:auto !important;
   height:100%;
}
</style>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body height="100%">
<!--container--><div id="container">
<!--rand_links--><div id="header_oben">
  <table width="200" border="0">
    <tbody>
      <tr>
        <td height="82"></td>
        </tr>
      <tr>
        <td height="104" align="left" valign="bottom"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1135" height="112" align="left" id="FlashID" title="">
          <param name="movie" value="Dateien/flash_animation_1.swf"/>
          <param name="quality" value="high" />
          <param name="wmode" value="transparent" />
          <param name="swfversion" value="11.2.0.0" />
          <!-- Dieses param-Tag fordert Benutzer von Flash Player 6.0 r65 und höher auf, die aktuelle Version von Flash Player herunterzuladen. Wenn Sie nicht wünschen, dass die Benutzer diese Aufforderung sehen, löschen Sie dieses Tag. -->
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- Das nächste Objekt-Tag ist für Nicht-IE-Browser vorgesehen. Blenden Sie es daher mit IECC in IE aus. -->
          <!--[if !IE]>-->
          <object data="Dateien/flash_animation_2.swf" type="application/x-shockwave-flash" width="1135" height="112" align="left">
            <!--<![endif]-->
            <param name="quality" value="high" />
            <param name="wmode" value="transparent" />
            <param name="swfversion" value="11.2.0.0" />
            <param name="expressinstall" value="Scripts/expressInstall.swf" />
            <!-- Im Browser wird für Benutzer von Flash Player 6.0 und älteren Versionen der folgende alternative Inhalt angezeigt. -->
            <div>
              <h4>Für den Inhalt dieser Seite ist eine neuere Version von Adobe Flash Player erforderlich.</h4>
              <p><a href="[URL]http://www.adobe.com/go/getflashplayer"><img[/URL] src="[URL]http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif[/URL]" alt="Adobe Flash Player herunterladen" width="112" height="33" /></a></p>
            </div>
            <!--[if !IE]>-->
          </object>
          <!--<![endif]-->
    </object></td>
        </tr>
      <tr>

        </tr>
    </tbody>
  </table></div>
<div id="header_links"><table width="494" height="132" border="0" align="left">
  <tbody>
    <tr>
      <td width="110" align="left" valign="top" height="10">

            </td>
      <td width="131"></td>
      <td width="114">&nbsp;</td>
      <td width="121">&nbsp;</td>
    </tr>
    <tr>
      <td height="4"><div id="menu">
      <div class="inhalt">
      <ul>
       <li><a href="inc/aktuelles.php" target="iframe">Aktuelles</a>
        <ul>
         <li><a href="inc/aktionen.php" target="iframe">Aktionen</a></li>
         <li><a href="inc/stellen.php" target="iframe">Stellen-<br>ausschreibungen</a></li>
                                    <li><a href="inc/downloads.php" target="iframe">Download-Center</a></li>
                                    <li><a href="..." target="_blank">Facebook</a></li>                                    
        </ul>
       </li>
                          </ul>
                </div>
                            </div>


            </td>
      <td height="10" rowspan="2"><div id="menu">
    <div class="inhalt">
      <ul>
       <li><a href="inc/leistungen.php" target="iframe">Leistungen</a>
        <ul>
         <li><a href="inc/vertrieb.php" target="iframe">Vertrieb</a></li>
         <li><a href="inc/aggregate.php" target="iframe">Aggregatebau</a></li>
         <li><a href="inc/reparatur.php" target="iframe">Reparaturen</a></li>
        </ul>
       </li>
                  </ul>
    </div>
      </div></td>
      <td rowspan="3" valign="top"><br><br>
        <div id="menu">
      <div class="inhalt">
      <ul>
       <li><a href="inc/produkte_index.php" target="iframe">Produkte</a>
        <ul>
         <li><a href="inc/....php" target="iframe">...</a>&ensp;&ensp;&ensp;&ensp;&ensp;&rArr;
                                    <ul>
                                      <li><a href="inc/.../....php" target="iframe">Antriebe</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Druckluftaufbereitung</a></li>
                                      <li><a href="inc/.../....php" target="iframe">Verschraubungen</a></li>
                                      <li><a href="inc/.../....php" target="iframe">Druckschalter</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Vakuum</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Ventile</a></li>
                                    </ul>
                                    </li>
         <li><a href="inc/.../....php" target="iframe">...</a>&ensp;&ensp;&ensp;&ensp;&ensp;&rArr;
                                     <ul>
                                         <li><a href="inc/.../....php" target="iframe">Pumpen</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Motoren</a></li>
                                      <li><a href="inc/.../....php" target="iframe">Zylinder</a></li>
                                      <li><a href="inc/.../....php" target="iframe">Schaltventile</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Stetigventile</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Steuerblöcke und Platten</a></li>
                                         <li><a href="inc/.../....php" target="iframe">Filter</a></li>
                                        </ul>
                                    </li>


         <li><a href="inc/....php" target="iframe">Hydraulik-<br>verschraubungen</a></li>
         <li><a href="inc/.../....php" target="iframe">...</a>&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&rArr;
                                     <ul>
                                         <li><a href="inc/.../....php" target="iframe">Schellen</a></li>
                                         <li><a href="inc/.../....php" target="iframe">Test</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Filtration<br>Technologie</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Diagtronics</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Hydraulikzubehör</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Ventile</a></li>
                                            <li><a href="inc/.../....php" target="iframe">Fluid Connectors</a></li>
                                        </ul>
                                    <li><a href="inc/AAA.php" target="iframe">AAA</a></li>
                                    <li><a href="inc/BBB.php" target="iframe">BBB</a></li>
                                    <li><a href="inc/schlauch.php" target="iframe">Schläuche</a></li>
                                    <li><a href="inc/produkte.php" target="iframe"><strong>Katalog</strong></a></li>
        </ul>
       </li>
                          </ul>
                </div>
            </div></td>
      <td height="4" align="center" valign="top"><h3><a href="inc/partner.php" target="iframe">Partner</a></h3></td>
    </tr>
    <tr>
      <td height="4">&nbsp;</td>
      <td height="4" align="center" valign="top">&nbsp;</td>
    </tr>
    <tr>
      <td height="52">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table></div>


<!--header--><div id="header_unten_2"></div>
<!--header--><div id="links_2"><table width="316" height="50" border="0" align="right">
  <tbody>
    <tr>
      <td width="83" align="center" valign="bottom">&nbsp;</td>
      <td width="9" align="center" valign="bottom">&nbsp;</td>
      <td width="80" align="center" valign="bottom">&nbsp;</td>
      <td width="1">&nbsp;</td>
      <td width="104" valign="bottom">&nbsp;</td>
      <td width="13">&nbsp;</td>
    </tr>
    <tr>
      <td align="center" valign="bottom"><a href="inc/ueberuns.php" target="iframe">Über uns</a></td>
      <td align="center" valign="bottom">&nbsp;</td>
      <td align="center" valign="bottom"><a href="inc/kontakt.php" target="iframe" onClick="iframe2.location.href='inc/_kontakt.php'">Kontakt</a></td>
      <td>&nbsp;</td>
      <td align="center" valign="bottom"><a href="inc/impressum.php" target="iframe" onClick="iframe2.location.href='inc/_impressum.php'">Impressum</a></td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table></div>
<div id="main_3"></div>
<div id="main_1"><iframe name="iframe" frameborder="0" src="inc/aktuelles.php" height="450%" width="1135px" align="top"></iframe>
</div>
<div id="unten_rand"></div>


</div>
<?php
$datei = fopen("inc/counter.txt","r+");
$counterstand = fgets($datei, 10);
if($counterstand == "")
   {
   $counterstand = 0;
   }
$counterstand++;
rewind($datei);
fwrite($datei, $counterstand);
fclose($datei);
?>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</Body>
</html>

Alles anzeigen

resteverwerter

Bitte keine Frames und kein Tabellen-Layout mehr verwenden, die 90er sind vorbei!

Hier findest du einige Tutorials für zeitgemäßes Webdesign: http://wiki.selfhtml.org/wiki/HTML/Tutorials

LG Matthias

huhn90

Danke für den Tipp. Jedoch habe ich nicht die Zeit die Seite komplett zu überarbeiten. Gibt es hierzu auch eine Möglichkeit das Problem zu lösen?

MfG Huhn

resteverwerter

Dein Anliegen ist eher ungewöhnlich! Normalerweise versucht man die Seite an die BREITE anzupassen.

Prozentangaben bei height beziehen sich immer auf den Wert der Breite.

Guck mal hier nach vh: http://wiki.selfhtml.org/wiki/Vh#L.C3.A4ngenma.C3.9Fe

Damit kannst Du relative Längenmaße festlegen.

Generell sollte man aber trotzdem HTML5-Eleemnte und ein responsives Layout verwenden, da immer mehr Leute mit Smartphones ins Netz gehen

LG Matthias

Tags