使用CSS在IE6中滾動DIVs

我一直在ASP.NET中編寫一個小型布告欄網站，但我沒有做任何事情可以使它在IE6中正常工作。主頁面有一個標題DIV，其下面有內容區域。在此區域內還有三個區域，左上角的搜索工具，下方的通知單列表以及右側顯示的當前通知。搜索和通知列表區域寬度爲240px，顯示的通知區域佔用寬度的其餘部分。問題是，如果內容大於顯示區域（即溢出：自動樣式），則通知列表和顯示的通知區域都應滾動，但在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，那麼很多CSS問題都可以通過使用Dean Edwards' IE7 scripts來解決 - 我沒有遇到這個問題，但能夠從更合適的瀏覽器中獲取設計，並讓它們「只是工作「使用這些腳本。藉助IE條件註釋的魔力，您可以將修補程序提供給那些仍然支持當前版本2個瀏覽器的人。

來源

2009-07-09 08:24:28

完美，這（並刪除以*開頭的CSS位）將其整理出來。 – Barn 2009-07-09 09:06:32

對於DIV滾動，它必須至少指定一個高度和/或寬度，具體取決於您希望滾動的維度。某些瀏覽器（例如Firefox）會在給定頂部和底部值的情況下推斷出高度。但是，IE6不會。

來源

2009-07-09 08:26:36 Jez

這幾乎工作，但我仍然無法得到DIVs的底部適合窗口，所以我有滾動條，但沒有底部給他們！ – Barn 2009-07-09 09:05:45

使用CSS在IE6中滾動DIVs

回答

相關問題