nicht angemeldet
min-height Hack für IE
Hallo zusammen,
ich habe folgendes Problem: meine Webseite besteht "grundsätzlich" aus einem Header und drei vertikalen Spalten. Die mittlere Spalte soll in ihrer Breite variabel sein (central-fluid Layout). Die rechte und linke Spalte sollten immer bis zum "Boden" des Fensters gehen, und nicht nur auf die Höhe des mittleren Divs. Beim Firefox konnte ich das über min-height erreichen. Wie schaffe ich das bei dem IE? Hier der Code:
hoehe.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Hoehe</title>
<link rel="stylesheet" type="text/css" href="hoehe.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="IEHoehe.css"><![endif]-->
</head>
<body>
<div class="minwidth">
<div class="wrapper">
<div class="widetop">Header</div>
<div class="outer">
<div class="wrap-cl">
<div class="left">links
</div> <!-- end left div -->
<div class="center">center
</div> <!-- end center div -->
</div> <!-- end wrap-cl div -->
<div class="right">rechts
</div> <!-- end right div -->
</div> <!-- end outer div -->
</div></div>
</body>
</html>
---------------------------------------------------------------------
hoehe.css
body {
padding: 0;
margin: 0;
background-color:#E3E6E9;
height:100%;
min-height:100%;
}
.clear {
clear: both;
}
/*fuer firefix, fuer IE extra in mainIEhack.css */
.minwidth {
min-width: 800px;
min-height: 100%;
}
.wrapper {
background-color:#E3E6E9;
height: 100%;
}
.widetop {
float:left;
width:100%;
height:6em;
background-color:#CCD2D7;
}
.outer {
margin-left: 170px;
margin-right: 160px;
word-wrap: break-word;
background-color: #FFF;
height:100%;
}
.wrap-cl {
float: left;
width: 100%;
}
.left {
float: left;
position: relative;
width: 170px; /* L */
margin-left: -171px; /* -L-1 */
margin-right: 0px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
position: relative;
width: 160px; /* R */
margin-right: -161px; /* -R-1 */
}
---------------------------------------------------------------------
und für IE Hacks: IEhoehe.css
.outer, .wide, h2, .wrapper, .wrap_cl, .minwidth {
height: 0px;
height: auto;
zoom: 1;
}
.incenter {
width: 100%;
margin-right: -10000px;
position: relative;
}
.minwidth {
-border-left: 800px solid #fff; /*hier min-width (incenter) einstellen */
}
.wrapper {
margin-left: -800px; /*hier margin-left dem min-width anpassen*/
position: relative;
}
---------------------------------------------------------------------
Wäre echt total toll, wenn sich einer von Euch Cracks kurz die Mühe geben könnte......!
Gruß Sonja
-
Hi,
Beim Firefox konnte ich das über min-height erreichen. Wie schaffe ich das bei dem IE?
Was passiert wenn Du "height"-Angaben in Conditional Comments versteckst? Beim IE <=6 verhält sich height in etwa wie beim FF min-height...
Gruesse, Joachim
--
Am Ende wird alles gut. -
Beim Firefox konnte ich das über min-height erreichen. Wie schaffe ich das bei dem IE?
http://www.mezzoblue.com/archives/2004/09/16/minheight_fi/
http://www.dustindiaz.com/min-height-fast-hack/Viele Grüße!
_ds
--
Damit wird er uns nun in Erinnerung bleiben; genau wie Axel Schulz als derjenige, der immer fleißig auf den Mund geboxt wurde und trotzdem Spaß dabei hatte. Oder Carsten Spengemann als Ex-DSDS-Moderator und derjenige, der einen Igel im Gesicht trägt.
Medienrauschen, Popsuppenstars: Henn. Bohlen.