1. Zuhause
  2. Frage und Antwort
  3. Festes Seitenlayout in IE6

Festes Seitenlayout in IE6

2008-08-27 10 views
3

Kopfzeile, Fußzeile und Seitenleisten haben feste Position. In der Mitte ein Inhaltsbereich mit beiden Bildlaufleisten. Keine äußeren Bildlaufleisten im Browser Ich habe ein Layout, das in IE7 und FF funktioniert. Ich muss IE6-Unterstützung hinzufügen. Wie kann ich das schaffen?Festes Seitenlayout in IE6

Hier ist eine Annäherung meiner aktuellen CSS.

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

<head> 
    <title>Layout</title> 
    <style> 
    * { 
     margin: 0px; 
     padding: 0px; 
     border: 0px; 
    } 

    .sample-border { 
     border: 1px solid black; 
    } 

    #header { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     right: 0px; 
     height: 60px; 
    } 

    #left-sidebar { 
     position: absolute; 
     top: 65px; 
     left: 0px; 
     width: 220px; 
     bottom: 110px; 
    } 

    #right-sidebar { 
     position: absolute; 
     top: 65px; 
     right: 0px; 
     width: 200px; 
     bottom: 110px; 
    } 

    #footer { 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     right: 0px; 
     height: 105px; 
    } 

    @media screen { 
     #content { 
     position: absolute; 
     top: 65px; 
     left: 225px; 
     bottom: 110px; 
     right: 205px; 
     overflow: auto; 
     } 
     body #left-sidebar, 
     body #right-sidebar, 
     body #header, 
     body #footer, 
     body #content { 
     position: fixed; 
     } 
    } 
    </style> 
</head> 

<body> 
    <div id="header" class="sample-border"></div> 
    <div id="left-sidebar" class="sample-border"></div> 
    <div id="right-sidebar" class="sample-border"></div> 
    <div id="content" class="sample-border"><img src="/broken.gif" style="display: block; width: 3000px; height: 3000px;" /></div> 
    <div id="footer" class="sample-border"></div> 
</body> 

</html>

Quelle

2008-08-27 Mocky

Antwort

0

Versuchen Sie IE7.js. Sollte Ihr Problem beheben, ohne irgendwelche Änderungen vornehmen zu müssen.

-Link: IE7.js

Quelle

2008-08-27 15:17:25 Cade

1

Fügen Sie den folgenden Code in die <head>

<!--[if lte IE 6]> 
<style type="text/css"> 
html, body { 
    height: 100%; 
    overflow: auto; 
} 
.ie6fixed { 
    position: absolute; 
} 
</style> 
<![endif]-->

Fügen Sie die ie6fixed CSS-Klasse, was Sie wollen position: fixed;

Quelle

2008-08-27 19:12:40 palotasb

1

Diese Antworten werden waren hilfreich und sie mich ließen fügen Sie eine begrenzte Form der festen Positionierung zu IE6 hinzu, aber keiner von ihnen behebt den Fehler, der mein Layout in IE6 unterbricht, wenn ich eine obere und eine untere CSS-Eigenschaft für meine Seitenleisten (die i s das Verhalten, das ich brauche).

Da oben und unten nicht angegeben werden kann, habe ich oben und Höhe verwendet. Die Höhe Eigenschaft erwies sich als sehr notwendig. Ich habe Javascript verwendet, um die Höhe neu zu berechnen, wenn die Seite geladen wird, und um die Größe zu ändern.

Unten ist der Code, den ich meinem Testfall hinzugefügt habe, um es zum Laufen zu bringen. Dies könnte mit jQuery viel sauberer sein.

<!--[if lt IE 7]> 
<style> 
body>div.ie6-autoheight { 
    height: 455px; 
} 
body>div.ie6-autowidth { 
    right: ; 
    width: 530px; 
} 
</style> 
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script> 
<script type="text/javascript"> 

function fixLayout() { 
    if (document.documentElement.offsetWidth) { 
     var w = document.documentElement.offsetWidth - 450; 
     var h = document.documentElement.offsetHeight - 175; 
     var l = document.getElementById('left-sidebar'); 
     var r = document.getElementById('right-sidebar'); 
     var c = document.getElementById('content'); 

     c.style.width = w; 
     c.style.height = h; 
     l.style.height = h; 
     r.style.height = h; 
    } 
} 
window.onresize = fixLayout; 
fixLayout(); 
</script> 
<![endif]-->

Quelle

2008-08-29 15:02:13 Mocky

 Verwandte Themen

  • Keine verwandten Themen^_^