在 100% 高度表中滚动单元格

2024-03-07

如果这个问题已经得到解答,我很抱歉,但是搜索“100% 高度”的东西有点困难。

我的问题是,由于浏览器自动调整单元格大小,我需要 100% 高度的表格布局,出于明显的原因,我不想自己编写脚本。

它与其他“100% 问题”不同,因为我需要一些单元格粘在顶部,一些单元格粘在底部,并通过浏览器调整中间大小以填充剩余空间。

这种工作方式是有效的,当我需要中间部分包含溢出的东西时,问题就会发生,显然我想要溢出:自动在那里让用户能够通过这些东西。它可以在 WebKit 中工作,在 Firefox 中工作,但不能,其他未测试。这是测试用例。

<html>
<head>
    <style>

        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        table {
            height: 100%;
            width: 200px;
            border: 0;
        }

        .fill {
            background-color: red;
        }

        .cont {
            overflow: auto;
            height: 100%;
        }

    </style>

</head>
<body>
    <table>
        <tr>
            <td style="height:50px"></td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
        <tr>
            <td class="fill">
                <div class="cont">
                    An opaque handle to a native JavaScript object. A JavaScriptObject cannot be created directly. JavaScriptObject should be declared as the return type of a JSNI method that returns native (non-Java) objects. A JavaScriptObject passed back into JSNI from Java becomes the original object, and can be accessed in JavaScript as expected
                </div>
            </td>
        </tr>
        <tr>
            <td style="height:100px"></td>
        </tr>
    </table>
</body>

我今天刚刚回答了这样的问题,我相信您正在寻找同样的东西,here https://stackoverflow.com/a/8821519/680398是问题本身和我的答案:

HTML

<div class="container">
    <div class="twenty">
        fixed height 20
    </div>
    <div class="fifty">
        fixed height 50
    </div>
    <div class="hundred">
        fixed height 100
    </div>
    <div class="auto">
        <div class="content">
            ....
        </div>
    </div>
    <div class="fifty" style="border-bottom:none; border-top:1px solid">
        fixed height 50
    </div>
</div>

CSS

html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    height:100%;
}

.twenty, .fifty, .hundred, .auto {
    border-bottom:1px solid black;
}

.twenty {
    height:20px;
}

.fifty {
    height:50px;
}

.hundred {
    height:100px;
}

.auto {
    height:100%;
    overflow:hidden;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    margin:-120px 0;
    padding:120px 0;
}

.content {
    float:left;
    overflow:auto;
    height:100%;
}

.content{
    width:100%;
}

全视图:http://jsfiddle.net/8abeU/show/ http://jsfiddle.net/8abeU/show/小提琴:http://jsfiddle.net/8abeU http://jsfiddle.net/8abeU

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 100% 高度表中滚动单元格 的相关文章

  • JSF 2.1 中的 HTML 4 <按钮>

    我想使用以下命令 The JSF
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • 使用 CSS 自定义字体?

    我见过一些在其网站上使用自定义字体的新网站 除了常规的 Arial Tahoma 等 他们支持大量的浏览器 如何做到这一点 同时 如果可能的话 还会阻止人们免费下载该字体 一般来说 您可以使用自定义字体 font face在你的 CSS 中
  • CSS设置默认滚动位置

    有没有办法将滚动位置设置为默认值 我知道如何在 javascript 中做到这一点 例如使用 jquery div divWithScroll attr scrollTop 200 但我只想用CSS来做 我不知道是否可行 不 CSS 中没有
  • 如何将udp发送到udp node.js服务器?

    我对此很陌生 所以我真的不知道我在做什么 但我已经设置了一个 node js udp 服务器 我想从客户端 来自网站 向它发送一个数据包 但我不知道如何在 javascript 中做到这一点 或者是否可能 我不是在研究如何从 Node js
  • 如何在HTML中的PHP中注释掉HTML和PHP?

    这是我想注释掉的一行代码 h1 class post title a href title a h1 一种流行的注释方法是分别注释 html 和 php 有一个更好的方法吗
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 来自 JSON 的 Angular 8 动态表单

    我正在尝试从 JSON 模式递归生成动态表单 但我正在努力解决找不到表单控件的问题 这是代码示例 我收到这个错误 错误错误 找不到名称为 createdAt 的控件 我尝试了不同的方法 但仍然存在问题 我知道我错过了一些东西 所以请帮忙 任
  • 防止浮动换行,直到元素达到最小宽度

    我有可变宽度的 HTML 布局 内容左侧有一个固定宽度的菜单 div 可变宽度 由 css max width 和 min width 设置 对于非常窄的浏览器窗口 我希望内容包裹在菜单下方 我目前通过设置来实现这一点float left在
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • 如何为背景图像添加边距?

    我想向背景图像添加边距 以便将其与屏幕中间保持距离 但将其添加到该类中会为整个主体添加边距 body poppage background url Imagenes tip3 png 50 200px no repeat E2E4E9 我怎
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 以编程方式将 TextView 添加到主屏幕小部件

    我想以编程方式将文本视图控件添加到我的主屏幕小部件 在下面的示例中 我使用 TextView 填充 Linearlayout 但是这里应该如何使用 RemoteView 它只接受 xml 资源布局作为参数 public class MyWi
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • 如何通过php获取网页的Open Graph协议?

    PHP 有一个简单的命令来获取网页的元标记 get meta tags 但这仅适用于具有名称属性的元标记 然而 开放图谱协议如今变得越来越流行 从网页获取 opg 值的最简单方法是什么 例如 我看到的基本方法是通过 cURL 获取页面并使用
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • iOS7 中“-webkit-overflow-scrolling: touch” 最初的屏幕外元素被破坏

    既然转基因种子已经发布了 我们现在可以谈谈了 看起来 iOS7 中的 webkit overflow scrolling touch 已损坏 最初不在屏幕上的元素的触摸事件不会触发 或者在某些情况下只是不可靠 这是一个例子
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显

随机推荐