CSS가있는 IE6의 스크롤 DIVs

나는 ASP.NET에 작은 게시판 사이트를 작성해 왔으며 IE6에서 제대로 작동하도록 만들지 않습니다. 기본 페이지에는 DIV 헤더가 있으며 그 아래에 콘텐츠 영역이 있습니다. 이 지역 내에는 3 개의 추가 지역, 검색 기능 (왼쪽 상단에 있음), 그 아래의 공지 목록 및 현재 표시된 오른쪽의 공지가 있습니다. 검색 및 알림 목록 영역의 너비는 240 픽셀이며 표시되는 알림 영역은 너비의 나머지 부분을 차지합니다. 문제는 콘텐츠가 표시된 영역 (예 : 오버플로 : 자동 스타일)보다 큰 경우 알림 목록과 표시된 알림 영역을 스크롤해야하지만 IE6에서는 발생하지 않는다는 것입니다. 다른 모든 것은 잘 나타납니다. 레이아웃은 다음과 같습니다.CSS가있는 IE6의 스크롤 DIVs

<?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>

아이디어가 있으십니까?

출처

2009-07-09 Barn

여전히 IE6을 지원하는 데 어려움이 있다면 Dean Edwards' IE7 scripts을 사용하여 많은 CSS 문제가 해결됩니다.이 특별한 문제는 발생하지 않았지만 더 많은 브라우저에서 디자인을 가져 와서 " 그냥 "이 스크립트를 사용하여 작동합니다. IE 조건부 설명의 마술을 사용하면 현재 버전보다 2 버전이 적은 브라우저에 여전히 수정 프로그램을 제공 할 수 있습니다.

출처

2009-07-09 08:24:28

완벽 해 (*로 시작하는 CSS 비트를 제거함) 완벽하게 정렬했습니다. – Barn

스크롤 할 DIV의 경우 스크롤 할 차원에 따라 높이 및/또는 너비를 지정해야합니다. 일부 브라우저 (예 : Firefox)는 상단 및 하단 값을 모두 제공하면 높이를 추론합니다. 그러나 IE6는 그렇지 않습니다.

출처

2009-07-09 08:26:36 Jez

이것은 매우 효과적 이었지만 여전히 DIV의 맨 아래를 윈도우에 넣을 수 없었기 때문에 스크롤바가 있지만 바닥은 없었습니다! – Barn

CSS가있는 IE6의 스크롤 DIVs

답변

관련 문제