使用 CSS 在 IE6 中滚动 DIV答案

【问题标题】：Scrolling DIVs in IE6 with CSS使用 CSS 在 IE6 中滚动 DIV
【发布时间】：2009-07-09 08:15:07
【问题描述】：

我一直在用 ASP.NET 编写一个小型公告板网站，但我所做的任何事情都无法使它在 IE6 中正常工作。主页有一个标题 DIV，其下方是内容区域。在该区域内还有另外三个区域，左上角的搜索工具，下方的通知列表，以及当前显示的通知在这两个区域的右侧。搜索和通知列表区域为 240px 宽，显示的通知区域占据了其余的宽度。问题是如果内容大于显示区域（即溢出：自动样式），通知列表和显示的通知区域都应该滚动，但这在 IE6 中不会发生。其他一切都显示正常。布局如下：

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

有什么想法吗？

【问题讨论】：

标签： asp.net css internet-explorer-6

【解决方案1】：

对于要滚动的 DIV，它必须至少指定一个高度和/或一个宽度，具体取决于您希望它滚动的维度。如果同时给出顶部和底部值，某些浏览器（例如 Firefox）会推断高度。但是，IE6 不会。

【讨论】：

这几乎成功了，但我仍然无法让 DIV 的底部适合窗口，所以我有滚动条但没有底部！

【解决方案2】：

如果您仍然坚持支持 IE6，那么使用 Dean Edwards' IE7 scripts 可以解决很多 CSS 问题——我没有遇到过这个特殊问题，但能够从更兼容的浏览器中获取设计并拥有它们使用这些脚本“正常工作”。借助 IE 条件 cmets 的魔力，您可以为那些仍然坚持使用比当前版本落后 2 个版本的浏览器的人提供修复。

【讨论】：

完美，这（并删除了以 * 开头的 CSS 位）将其整理出来。