带溢出的 DIV:auto 和 100% 宽的表

2024-01-18

我希望有人能够在这里帮助我。我已尽力简化我的示例。

我有一个绝对定位的 DIV,在本例中我已将其填充到浏览器窗口中。该div具有overflow:auto属性,可以在内容太大而无法显示DIV时提供滚动条。

在 DIV 中,我有一个表格来显示一些数据,其宽度为 100%。

当内容在垂直方向变得太大时,我希望出现垂直滚动条,并且表格会稍微水平收缩以容纳滚动条。然而,在 IE7 中,尽管仍然有足够的水平空间容纳 div 中的所有内容,但也会出现水平滚动条。

这是 IE 特有的 - Firefox 完美运行。

完整来源如下。非常感谢任何帮助。

Tony

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Table sizing bug?</title>
    <style>
        #maxsize
        {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            border: 5px solid silver;
            overflow: auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="maxsize">
        <p>This will be fine until such time as the vertical size forces a
           vertical scroll bar. At this point I'd expect the table to re-size
           to now take into account of the new vertical scroll bar. Instead,
           IE7 keeps the table the full size and introduces a horizontal
           scroll bar.
        </p>
        <table width="100%" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>I</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
                <td>M</td>
                <td>N</td>
                <td>O</td>
                <td>P</td>
                <td>Q</td>
                <td>R</td>
            </tr>
        </tbody>
        </table>

        <p>Resize the browser window vertically so this content doesn't
           fit any more</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
    </div>
    </form>
</body>
</html>

添加于 2010 年 3 月 16 日...我认为指出 GWT 的源代码在评论中指出这个问题可能会很有趣......


我在 IE7 中遇到了水平条过多的问题。我使用了 D Carter 的解决方案,稍作改变

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

要在 IE 7 以下的浏览器中工作,您需要添加:

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

带溢出的 DIV:auto 和 100% 宽的表 的相关文章

随机推荐

  • 如何在Linux用户空间中实现高精度定时器?

    我的 BeagleBoard 上安装了 Angstrom Linux 我想实现非常精确的计时器 每 500us 触发一次 我读到hrtimers 但我发现的所有实现都是针对内核空间的 我想在用户空间中实现它 有没有可以调用这些的APIhrt
  • React-hook-form 和 Material UI FormControl

    所以我试图为我的表单注册一些单选按钮 但它不会注册
  • ImageMagick 和 Java Runtime Exec 的问题

    我有一个奇怪的问题 我认识的 java 专家都无法解决 我需要在我的应用程序上使用 imagemagick 将我网站上的电子邮件转换为图像 这样就没有锅可以轻松地获取电子邮件 使用 image magick 命令行解决了问题 如下所示转换
  • 为什么 std::initializer_list 会复制项目?

    我一直以为std initializer list是一个轻量级代理对象 它只会从列表项中获取 const 引用 而不是复制它们 但后来我发现在这种情况下实际上执行了复制 struct Test Test std cout lt lt thi
  • 使用 Vue Js 和 Vue Cli 构建 Chrome 扩展

    我目前正在构建一个 Chrome 扩展程序vuejs https vuejs org 供电前端 使用这个效果非常好vuecli https cli vuejs org 直到应用程序开始使用Webextension API 普通网站无法访问此
  • PyQt5 无法导入 QtGui

    我刚刚从 PyQt4 迁移到 5 并且 QtGui 遇到问题 我使用 32 位 Windows 安装程序安装 而不是我自己的版本 当我做 from PyQt5 import QtGui I get class MainWindow QtGu
  • Feign 客户端中不支持 Spring Data Pageable 作为 RequestParam

    我一直在尝试为我的其余 api 公开一个 Feign Client 它采用 Pageable 作为输入并定义了 PageDefaults 控制器 GetMapping value data produces MediaType APPLIC
  • 从 Eclipse 连接到 MySQL (CDT)

    我尝试使用 Eclipse 中的 C 连接到 MySQL 数据库 并参考了互联网上的所有建议 但没有一个是完全有帮助的 我正在使用 Eclipse 和 MinGW 连接到 MySQL 我添加了 C Program Files boost C
  • htaccess 重写传递两个变量或一个取决于两者是否可用?

    我想将第一个目录作为变量传递 将子目录作为另一个变量传递 它适用于具有两个目录 something something2 的 url 但当我尝试仅使用一个目录 something 时 我收到错误 404 RewriteRule posts
  • 在浏览器中渲染 docx 文件

    我正在使用 docx4j 将 microsoft word 文档转换为 pdf 然后在浏览器中显示它http www docx4java org trac docx4j http www docx4java org trac docx4j它
  • 在 Python Pandas 中训练朴素贝叶斯的不同类型的特征

    我想使用许多特征来训练朴素贝叶斯分类器来对 A 或 非 A 进行分类 我有三个不同值类型的特征 1 total length 正整数 2 元音比率 以小数 分数表示 3 twoLetters lastName 包含多个两个字母字符串的数组
  • 是否可以在 Perl 中使用 SSH 私钥对我的数据进行签名? [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我是 Perl 新手 所以这可能是非常基本的 但我找不到解决这个问题的方法 我正在尝试签署我的数据 该数据必须使用我的通
  • Eclipse CDT - 链接到 Windows lib 文件的问题

    使用 gcc 编译时出现以下链接器错误 undefined reference to SetStretchBltMode 8 undefined reference to StretchDIBits 52 undefined referen
  • 使用 Serialized 通过 Intent 传递数据

    我已经用可序列化实现了我的类 但它仍然不起作用 这是我的课 package com ursabyte thumbnail import java io Serializable import android graphics Bitmap
  • 一台服务器上的网站出现 IE11 文档模式 7 问题,但另一台服务器上则不然

    On IE 11 当我们浏览部署在Windows Server 2012 notR2 网站正确显示首页 如下图1 但如果完全相同的网站部署在另一台服务器上windows Sever 2012 R2 在IE11上浏览 显示完全乱七八糟 如下图
  • 如何从字节播放mp3?

    有没有办法直接使用python从字节播放mp3 如果没有 我可以将二进制文件转换为不同的音频格式并使二进制文件可播放吗 编辑 以下代码适用于wav文件但不是mp3 from pygame import mixer time mixer pr
  • Spring Boot 应用程序一天后冻结

    我有一个 Spring Boot 应用程序在两台服务器上运行 它接受文件上传请求 约 1 KB 通过来自 1000 个物联网设备的控制器 另外还有一个TCP监听器它还接受来自这些物联网设备的 GPS 数据作为流 我已将一台服务器上的 Tom
  • Hibernate 或 JPA 中的游标或记录集迭代器之类的东西?

    有什么方法可以在 Hibernate 中处理长查询结果吗 如果我想绘制包含数百万条记录的表格并允许用户在其上导航怎么办 目标不是将所有数据传输到客户端并处理当前位置 您可以尝试使用 Hibernate可滚动结果 http docs jbos
  • “元素丢失..”尝试使用 生成类

    使用 VS 2013 附带的 XSD 工具 我收到以下消息 尝试从包含以下内容的 xsd 生成类
  • 带溢出的 DIV:auto 和 100% 宽的表

    我希望有人能够在这里帮助我 我已尽力简化我的示例 我有一个绝对定位的 DIV 在本例中我已将其填充到浏览器窗口中 该div具有overflow auto属性 可以在内容太大而无法显示DIV时提供滚动条 在 DIV 中 我有一个表格来显示一些