✔ 3 Zeilen Layout

Status
Nicht offen für weitere Antworten.
C

chris4712

Erfahrenes Mitglied
Guten Abend!

Ich habe mal wieder ein Problem mit meinem Wunsch- Layout.
Ich möchte ein drei zeiliges Layout was die komplette Browserhöhe benutzt.
Die erste Zeile soll 40PX hoch sein. Die dritte Zeile soll 350PX hoch sein. Die mittlere Zeile soll eine Variable Höhe haben (ggf. Vertikalen Scrollbar wenn der Inhalt zu lang ist).

Soweit so gut. Wenn ich den IE in Quirks Modus bringe, geht es. Nur dann geht mein "Wunschmenü" (http://www.cssplay.co.uk/menus/pro_drop2.html) nicht mehr.

Vollständigkeitshalber hier noch mein bisheriger Code:
HTML: 
  <div id="Page">
   <div id="Menu">   
   Menu
   </div>
 
   <div id="SelectArea">
    Select Area
   </div>  
 
   <div id="DetailArea">
    Detail Area
   </div>
  </div>

Code: 
html {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow:hidden; /*get rid of scroll bars in IE */
/* */
}
body {
height:100%; /* fix height to 100% for IE */
max-height:100%; /* fix height for other browsers */
overflow:hidden; /*get rid of scroll bars in IE */
padding:0; /*remove padding */
margin:0; /* remove margins */
border:0; /* remove borders */
}
#Menu {
 background-color: Red;
 
 height: 40px;
}
#SelectArea {
 background-color: Lime;
 overflow: scroll;
 position: absolute;
 
 top: 0px;
 bottom: 350px;
 height: auto;
}
 
#DetailArea {
 background-color: Aqua;
 
 height: 350px;
 width: 100%;
 
 position: absolute;
 bottom: 0px;
}
 
Hi,

in diesem Fall müsstest du auf das expression()-Feature des IE zurückgreifen, das aber aktiviertes Javascript im Browser voraussetzt:

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

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

#Menu {
          position: absolute;
          top: 0;                       
          right: 0;               
          left: 0;                
          height: 40px;                
          padding: 0;                
          overflow: hidden;       
          background: red;
  /* nur für IE: */
          width: 100%;
}

#SelectArea {
          position: absolute;
          top: 40px;                
          right: 0;                
          bottom: 350px;                
          left: 0;                
          overflow: auto;                
          background: lime;
  /* nur für IE: */
          width: 100%;
          height: expression((document.body.clientHeight - 390) + "px");
                                 /* top-Wert + bottom-Wert = 390 */
}

#DetailArea {
          position: absolute;
          rightt: 0;                
          bottom: 0;        
          left: 0;                
          height: 350px;               
          padding: 0;                
          overflow: hidden;        
          background: aqua;
  /* nur für IE: */
          width: 100%;
}
-->
</style>
</head>

<body>

<div id="Menu">
  Menu
</div>

<div id="SelectArea">
  SelectArea
  <!-- Ab hier wird der Inhalt zunächst auskommentiert -->
  <!--
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  <p>some dummy text to show the vertical scrollbar</p>
  -->
</div>

<div id="DetailArea">
  Detail Area
</div>

</body>
</html>
mfg Maik
 
Hallo Maik,

vielen Dank für deine Lösung!
Das expression()-Feature kannte ich noch gar nicht.

Musste jedoch noch eine kleine Änderung machen:
Code: 
#Menu {
         /*position: absolute;*/
          top: 0;                       
          right: 0;               
          left: 0;                
          height: 40px;                
          padding: 0;                
          overflow: hidden;       
          background: red;
  /* nur für IE: */
          width: 100%;
}

Sonst geht das Menü wieder nicht :confused:
Dürfte jedoch keine Auswirkung haben. Oder?
Gruß

Christian
 
Die absolute Positionierung geht schon in Ordnung. Vielmehr muß hier die overflow:hidden-Deklaration entfernt und im Gegenzug eine Schichtpositionierung eingerichtet werden:

Code: 
#Menu {
          position: absolute;
          top: 0;                       
          left: 0;                
          right: 0;                
          height: 40px;                
          padding: 0;                
          /*overflow: hidden;*/ /* auskommentiert = deaktiviert */
  /* nur für IE: */
          width: 100%;
          z-index:10; /* Schichtpositionierung */
}
mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück