Scrollen DIVs in IE6 mit CSS

Ich habe eine kleine Anschlagtafel Website in ASP.NET geschrieben und nichts, was ich tun werde es in IE6 richtig funktionieren. Die Hauptseite hat einen Header DIV mit dem Inhaltsbereich darunter. Innerhalb dieser Region befinden sich drei weitere Regionen, eine Suchfunktion oben links, eine Liste von Hinweisen darunter und die aktuell angezeigte Meldung rechts von diesen beiden. Die Such- und Hinweislistenbereiche sind 240 Pixel breit und der angezeigte Hinweisbereich nimmt den Rest der Breite ein. Das Problem besteht darin, dass die Notizliste und die angezeigten Notizbereiche beide scrollen sollten, wenn der Inhalt größer als der angezeigte Bereich ist (d. H. Überlauf: Auto-Stil), aber dies geschieht nicht in IE6. Alles andere wird angezeigt. Das Layout ist wie folgt:Scrollen DIVs in IE6 mit CSS

<?xml version="1.0" encoding="UTF-8" ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head runat="server"> 
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> 
    <title>Notice Board</title> 
    <style type="text/css"> 
     body 
     { 
     margin:0; 
     border:0; 
     padding:0; 
     height:100%; 
     max-height: 100%; 
     overflow: hidden; 
     } 

     #header 
     { 
     position:absolute; 
     top:0; 
     left:0; 
     width:100%; 
     height:130px; 
     overflow:hidden; 
     } 

     #footer 
     { 
     position:absolute; 
     bottom:0; 
     left:0; 
     width:100%; 
     height:0px; 
     overflow:hidden; 
     } 

     #content 
     { 
     position:absolute; 
     top:130px; 
     left:0; 
     bottom:0px; 
     right:0; 
     overflow:hidden; 
     } 

     * html body 
     { 
     padding:130px 0 0 0; 
     } 

     * html #content 
     { 
     height:100%; 
     width:100%; 
     } 

     #leftdiv 
     { 
     position:absolute; 
     left:0; 
     width:240px; 
     top:0; 
     height:100px; 
     overflow:hidden; 
     } 

     #listdiv 
     { 
     position:absolute; 
     left:0; 
     width:240px; 
     top:100px; 
     bottom:0px; 
     overflow:auto; 
     } 

     #noticediv 
     { 
     position:absolute; 
     left: 270px; 
     right:0; 
     top:0; 
     bottom:0; 
     overflow:auto; 
     } 
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server" method="post"> 
     <div id="header" > 
     <!-- Header content goes here --> 
     </div> 

     <div id="content"> 

     <div id="leftdiv"> 
      <!-- Content region for the search facility goes here --> 
     </div> 

     <div id="listdiv"> 
      <!-- Content region for the notice list goes here --> 
     </div> 

     <div id="noticediv" > 
      <!-- Content region for the displayed notice goes here --> 
     </div> 
     </div> 
    </form> 
    </body> 
</html>

Irgendwelche Ideen?

Quelle

2009-07-09 Barn

Wenn Sie immer noch mit Unterstützung von IE6 stecken, dann werden viele CSS-Probleme gelöst mit Dean Edwards' IE7 scripts - Ich habe dieses spezielle Problem nicht konfrontiert, aber in der Lage, Entwürfe von mehr kompatiblen Browsern zu nehmen und sie haben " einfach arbeiten "mit diesen Skripten. Mit der Magie von IE-bedingten Kommentaren können Sie die Fix-Ups nur jenen Leuten liefern, die immer noch an Browsern hängen, die 2 Versionen hinter dem aktuellen Stand sind.

Quelle

2009-07-09 08:24:28

Perfekt, dies (und Entfernen der CSS-Bits beginnend mit *) hat es aussortiert. – Barn

Damit ein DIV scrollen kann, muss mindestens eine Höhe und/oder eine Breite angegeben werden, je nachdem, welche Dimension Sie scrollen möchten. Einige Browser (z. B. Firefox) leiten eine Höhe ab, wenn sie einen oberen und einen unteren Wert erhalten. IE6 wird jedoch nicht.

Quelle

2009-07-09 08:26:36 Jez

Dies hat fast funktioniert, aber ich konnte immer noch nicht die Unterseite der DIVs in das Fenster passen, also hatte ich Scrollbalken aber keinen Boden zu ihnen! – Barn

Antwort

Verwandte Themen