不固定高度的滚动div

2024-07-04

我需要构建一个动态调整大小的滚动 div。

div 应动态调整大小以适应屏幕。但如果内容不适合屏幕,它应该显示一个滚动条。因此浏览器自己的滚动条永远不需要激活。

我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中overflow: auto.

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
    <div id="gridcontent" style="height:100%">
    <!--Put loads of text in here-->
    </div>
</div>

问题是这仅在第一个 div 具有固定高度时才有效。我本来希望我可以将第一个 div 设置为height:100%,但遗憾的是不是 - 该属性似乎被忽略,并且滚动条没有出现。

我尝试将 div 放入表格中height:100%,并将第一个 div 设置为height:auto,希望它能从其父级获得高度。但 div 似乎仍然忽略了 height 属性。

所以我的问题是:可以仅使用 html 来完成此操作,还是使用 javascript 来完成?


你可以使用绝对定位拉伸 div http://alistapart.com/article/conflictingabsolutepositions#section4。这样,它将始终采用浏览器窗口(或最近的定位祖先)的大小。

给定这个 HTML:

<div id="gridcontainer"></div>

CSS 应该是这样的:

#gridcontainer {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: auto;
}

现场演示 http://jsfiddle.net/bazmegakapa/LXRcq/

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

不固定高度的滚动div 的相关文章

  • requestAnimationFrame 在较弱的机器上运行缓慢。解决办法吗?

    所以 我正在制作一个动画 不是在网站 网页上 它使用Javascript 对于动画 我使用requestAnimationFrame代替setInterval as setInterval不能很好地满足我的需要 然而 尽管requestAn
  • 如何在javascript中使用MD5传输密码

    我弹出一个 jquery 对话框模式框用于登录我的网站 当用户单击登录时 它会向 login php 文件发出一个 post 请求 如下所示 post includes login php user username pass passwo
  • redux fetch body 不能在无 cors 模式下使用

    我有一个调用函数的操作 dispatch Api url my url method POST data data 这里我将数组作为数据传递 import fetch from isomorphic fetch export default
  • 在 firefox-extension 的新选项卡中打开链接

    我开发了一个网络应用程序来将其用作 Firefox 扩展 在 Firefox 中 我将它包含在 iframe 中 如下所示 现在我想在我的应用程序中有一些传出链接 如果我只使用普通的链接标记 例如 a href http mywebapp
  • 预加载队列中的 mp3 文件,以避免播放队列中下一个文件时出现任何延迟

    我正在编写一个脚本 其中我正在播放多个 mp3 并且每个文件都在队列中 播放下一个 mp3 文件会出现轻微延迟 因为缓冲 加载文件需要时间 我如何缓冲队列中的下一个 mp3 文件 以便所有文件顺利运行而没有任何延迟 getData 1 fu
  • 如何安装并开始使用 Vuetify 和 Vue.js 3

    我在哪里可以找到新的 Vuetify 版本与 Vue js 3 兼容的文档以及如何使用 Vue cli 安装和设置它 在 vue 2 中我们这样做 vue create project name then vue add vuetify 我
  • angularjs表单重置错误

    我正在尝试使用 angularjs 制作一个带有验证的表单 到目前为止我做得很好 但是 当我提交重置按钮时 除了从验证部分收到的错误消息之外 所有字段都会重置 当我重置表单时 如何删除所有字段和错误消息 这就是我按下重置按钮时的情况 这是我
  • 使用jsoup从两个标签之间提取未识别的html内容?正则表达式?

    我想获取两者之间所有链接的名称h2那里有标签 h2 span class mw headline People span span class mw editsection span class mw editsection bracket
  • 如果按下警报,则转到“确定”按钮后的 URL

    我需要确保当用户在 JavaScript 警报窗口中单击 确定 时 浏览器会移动到不同的 URL 这可能吗 你是什 么意思 确保 alert message window location some url 在警报窗口中单击 确定 后重定向
  • 检查纬度和经度是否在谷歌地图圆内

    以下是我正在寻找的期望结果 我想知道的是 我使用中心点纬度和周围半径创建了圆 现在我想知道 如何检查 计算 纬度和经度是否在该区域之内或之外 如果您能给我 JavaScript 代码示例 我将不胜感激 我正在使用 Google 地图 API
  • Gulp Sass - 如何正确命名输出 css?

    我正在阅读有关 sass 的教程here https scotch io tutorials getting started with sass然后我尝试了其他方法 但在本教程中无法得到答案 这就是问题所在 我的 gulpfile js 中
  • Twitter 引导工具提示说明不起作用?

    我注意到我的 Twitter 引导工具提示不尊重data position 所以 我前往Twitter Bootstrap 工具提示演示 http twitter github com bootstrap javascript html t
  • 使用相同的 URL 哈希刷新 BackboneJS? [复制]

    这个问题在这里已经有答案了 我当前的主干应用程序有一个 url localhost users 有没有办法访问localhost users当位于 URL 时localhost users所以它会刷新页面 目前 当我在localhost u
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov
  • 如何将嵌入的 YouTube 视频的帧(通过 iframe)写入画布?

    我希望能够从 YouTube 视频中的各个点 不仅仅是缩略图 提取帧 并对它们进行一些处理 我可以使用 iframe API 将视频嵌入到我的网站中 但我正在努力寻找一种将其捕获到画布上的方法 如果我被迫捕获整个屏幕 也可以 如果我必须更改
  • IOS - React Native - 未处理的 JS 异常:SyntaxError

    每当我创建新的 React Native 项目时 我都会遇到问题 显示红色屏幕 并在 xcode 控制台中收到以下错误消息 嗨 我有同样的问题 在这里找到了解决方案 https github com facebook react nativ
  • Phantomjs 可以工作,但速度很慢

    我正在尝试使用 PhantomJS 截取网页的屏幕截图 具体来说 我正在使用捕获的示例espn com from this http skookum com blog dynamic screenshots on the server wi
  • 在 javascript/jquery 中从 JSON 中删除元素

    我在 javascript 中从 JSON 对象删除数据时遇到问题 我正在动态创建此 JSON 并且删除也将动态进行 下面是我的 JSON 和我所处的情况 brands 51 2046 53 67 64 现在 我必须从中删除 53 我正在使
  • 如何转义 XML 中的 & 符号,以便它们在 HTML 中呈现为实体?

    我有一些 XML 文本希望在 HTML 页面中呈现 该文本包含一个 符号 我想在其实体表示中呈现它 amp 如何在源 XML 中转义这个 符号 我试过 amp 但这被解码为实际的 符号 即在 HTML 中无效 https stackover
  • 街景中标记上的 InfoWindows

    根据 Google 文档 当您在地图上创建标记时 市场也会 复制 到地图的街景版本上 但是 onClick 事件绑定不会被复制 或者至少看起来不会被复制 因此我无法在 StreetView 中打开标记上的 InfoWindow 理想情况下

随机推荐

  • Python:汇总和聚合 DataFrame 中的组和子组

    我正在尝试构建一个表 其中的组按子组划分 并包含每个子组的计数和平均值 例如 我想转换以下数据框 到一个看起来像这样的表 其中interval是一个更大的组和列a thru i成为组内的子组 每个单元格中具有相应子组的计数和平均值 我尝试过
  • nodejs npm 安装socket.io 错误

    我是新的 Node js 开发人员 我尝试简单的聊天项目 所以我想使用 NPM 安装 socket io 但出现此错误 我用的是ubuntu 12 04 ubuntu Ubuntu 1210 Masa st blog npm install
  • 如何在AsyncTask中举杯,提示我使用Looper

    我有 AsyncTask 在后台完成的任务 在某些时候 我需要发出一个 Toast 来表示某件事已完成 我尝试过但失败了因为Caused by java lang RuntimeException Can t create handler
  • iOS 7.1 CommonCrypto 库抱怨:隐式转换丢失整数精度:'NSUInteger'(无符号长整型)到 CC_LONG(无符号整型)

    我在从文件执行 MD5 时收到上述错误 标题中 我通常可以处理这些类型的 32 gt 64 位转换问题 但在这种情况下 我不知道我应该做什么 因为 CC MD5 是其中的一部分的CommonCrypto gt CommonDigest iO
  • 以编程方式 Swift 在 UIView 上添加 UITextField

    我是 Swift 和 iOS 编程新手 我试图创建一个UITextField以编程方式使用 Swift 但无法完全正确 另外 如何将其更改为半透明效果以淡入背景 var myField UITextField UITextField fra
  • React 中的 dom 就绪事件

    我有一些如下所示的组件 Wrapper 包装Loader和Page 加载器 一些动画 页面 页面内容 像这样的代码 div div class Loader extends Component class Page extends Comp
  • WinRT中的网络检查(C#实现)

    我们如何在 Windows 8 Metro 应用程序中检查网络状态 即不同网络的可用性 3g 4g wifi 等 Try 这个方法 http social msdn microsoft com Forums en US winappswit
  • 无法让 python 请求与代理一起使用

    我正在尝试通过代理服务器执行简单的获取请求 import requests test requests get http google com proxies http 112 5 254 30 80 print test text 代码中
  • 哪里可以获得 Android Studio Arctic Fox uninstall.exe 文件?

    目前 我遇到了一些 android studio 插件无法正常工作的问题 因此我尝试卸载并重新安装 android studio 但由于 uninstall exe 丢失而失败 我直接找到并卸载了 android studio 的大部分文件
  • VB中的动态方法调用无需反射

    我想使用方法调用来格式化任何数字类型 如下所示 Option Infer On Option Strict Off Imports System Runtime CompilerServices Namespace GPR Module G
  • 将带有数学表达式的字符串转换为浮点数

    文本字段包含数学表达式 例如 12 45 6可以将此字符串转换为数字吗 我们可以使用谓词设施吗 NSString foo a b c d 5 15 dummy predicate that contains our expression N
  • 使用lib添加自定义字体android

    我正在使用 android 自定义字体 lib Calligraphyhttps github com chrisjenx Calligraphy https github com chrisjenx Calligraphy 但对textv
  • Blazor - 重定向到一个解决方案中另一个项目中的页面

    我遇到了这样的情况 在一个解决方案中 想要将用户从一个项目的页面重定向到另一个项目的页面 这很重要 我在 blazor 服务器上做 任何人都可以教我一些东西吗 您始终可以注入 NavigationManager 通过此您可以将用户重定向到另
  • 来自 Abaqus/CAE 的 Python 多处理

    I am using a commercial application called Abaqus CAE1 with a built in Python 2 6 interpreter and API I ve developed a l
  • 使用 PowerShell 中的“备份”上下文创建卷影副本

    我正在编写一个 PowerShell 脚本 用于使用 rsync 备份 Windows 计算机 为此 我尝试使用所述脚本中的 WMI 创建一个有编写者参与的非持久卷影副本 显然建议备份 我从另一个问题中得知 从 Powershell 访问卷
  • 过滤(减少)NumPy 数组

    假设我有一个 NumPy 数组arr我想根据 可广播 函数的真值进行逐元素过滤 减少 例如 我只想获取低于某个阈值的值k def cond x return x lt k 有几种方法 例如 使用发电机 np fromiter x for x
  • 如何使信号客户端避免表单身份验证?

    我的 MVC 网站在 web config 中有表单授权 现在所有的页面都需要通过授权才能被查看 但是现在我有一个控制台程序 C 控制台程序 这个程序需要发送一些消息到 SignalR 集线器 但是我的 signalR Hub 在我的 MV
  • 使用相同的 URL 哈希刷新 BackboneJS? [复制]

    这个问题在这里已经有答案了 我当前的主干应用程序有一个 url localhost users 有没有办法访问localhost users当位于 URL 时localhost users所以它会刷新页面 目前 当我在localhost u
  • 使用关联类实现双向、多对多关联的流畅 NHibernate 映射

    我在 EntityA 和 EntityB 之间有一个双向多对多关联 并且我使用关联类 EntityABLink 对此进行建模 因为我需要跟踪有关该关系的其他属性 此外 我还有另一个类 它保存对 EntityA 和 EntityB 之间特定关
  • 不固定高度的滚动div

    我需要构建一个动态调整大小的滚动 div div 应动态调整大小以适应屏幕 但如果内容不适合屏幕 它应该显示一个滚动条 因此浏览器自己的滚动条永远不需要激活 我可以通过在 div 中放置另一个 div 并使用来让滚动条出现在 div 中ov