div 上的滚动条带有溢出:自动和百分比高度

2023-11-26

是否可以创建一个可以根据浏览器大小进行调整并且可以滚动的 div? 我想用overflow:auto关于 div 和百分比高度90%.

页面的结构是

<body style="height:100%">
<div id=header style="height:100%">headerinfo</div>
<div id=content style="height:100%;overflow:auto">content which is replaced dynamically</div>
</body>

Will overflow:auto在未知的情况下工作px层次结构中某处的高度?


回答你的问题,是的overflow:auto会起作用,但你需要height: 100%也在 HTML 标签上:

html,body {    
    height:100%;
    margin: 0;
}
#header {
    height: 100%;
}
#content {
    height: 100%;
    overflow: auto;
}

不过,您的标记结构方式会产生两个与视口高度相同的 div,一个位于另一个顶部。这就是你的意图吗?

如果是这样,这里有一个 jsFiddle 来说明您的示例。我调整了标记并添加了额外的内容,以便内容 div 根据您的需要溢出。

http://jsfiddle.net/chrissp26/WsNjm/

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

div 上的滚动条带有溢出:自动和百分比高度 的相关文章

  • 如何用Python抓取动态网页

    我正在努力做什么 抓取下面的网页以获取二手车数据 Issue 刮掉整个页面 在上面的 url 中 仅显示前 30 项 这些可以通过我在下面编写的代码来抓取 其他页面的链接显示为 1 2 3 但链接地址似乎是用 Javascript 编写的
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • BUG - 在 IOS 中没有选择标签的完成按钮

    我正在使用最新的离子并有一个简单的选择标签
  • 导航栏折叠在 Bootstrap 中不起作用

    Bhanu pratap 解决了这个问题 在这个问题的末尾检查一下 我一直在遵循旧的路线来构建导航栏折叠 三明治 问题是课程中的页面顶部似乎有一个黑条 并且缩小页面时会出现导航栏 对我来说 我只需在左侧找到一个按钮 另外 当我缩小页面时 我
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 为什么 document.getelementbyId 在 Firefox 中不起作用?

    我不明白为什么 document getElementById 在 Firefox 中不起作用 document getElementById main style width 100 当我检查 Firebug 时 它说 类型错误 docu
  • 自定义 WP 主题时,我应该将导航栏放在“”标签之前还是之后?

    我正在通过制作子主题来自定义 WP 主题 我将 Bootstrap 中的导航栏放入子主题目录中的 header php 文件中 但是 我不确定在哪里放置导航栏代码 我可以把它都放在前面and之后标记成功 例如 无论我选择哪一个 导航栏都显示
  • 在 Android 上禁用标注(上下文菜单)

    在网络应用程序中 我需要禁用移动浏览器在触摸并按住 长按 触摸目标 例如 img 或链接 我已经在使用了 webkit touch callout none 它在 iPhone 和 iPad 上运行良好 但似乎不适用于 Android 在
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • 无法使用 BeautifulSoup4 (Python 3) 抓取特定表

    我想从 Ligue 1 足球网站上抓取一张表格 具体来说 该表包含有关卡片和裁判的信息 http www ligue1 com LFPStats stats arbitre competition D1 http www ligue1 co
  • 网站在 iPhone 屏幕右侧显示空白区域

    我遇到问题http eiglaw com http eiglaw com iPhone 屏幕右侧显示约 25 像素宽的空白 边框 我在 stackoverflow 上研究了这个问题 这些帖子是相关的 但是当我尝试提供的各种解决方案时 我无法
  • VueJS 中数据无法正确显示

    我的 VueJS 代码有一个小问题 在 输出 压缩的 GS1 数字链接 URI 部分中 When there is no result it should have nothing display like this I have remo
  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码
  • 覆盖层不与 UITableView 一起滚动 - iOS

    我有一个 UITableView 类 它使用以下方法在转到下一个屏幕时调用加载覆盖 问题是这个加载屏幕不随列表滚动 所以如果你滚动一点并单击某些东西 加载屏幕不会显示 因为它位于顶部 如何让加载屏幕始终保持在 UITableView 的顶部
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 使用 CSS 折叠和展开元素

    我正在尝试构建一个页面 加载时仅可见标题 并且 当用户单击标题时 每个标题下方的表格会在隐藏和显示状态之间切换 我的限制是只能在 CSS 中执行此操作 这是我到目前为止想到的 https jsfiddle net Argoron c1ypx
  • 禁用允许文本选择的

    残疾人可以吗

随机推荐

  • 为什么在 JavaScript 中使用 getter 和 setter?

    我知道 JavaScript 中的 getter 和 setter 是如何工作的 我不明白的是 当我们可以使用普通函数得到相同的结果时 为什么我们需要它们 考虑以下代码 var person firstName Jimmy lastName
  • 如何在 django 中集成 Foundation 5

    我想开始在 django 项目中使用 Foundation 5 我的疑问是如何设置 Foundation 项目的文件夹 Foundation 现在使用 Bower 来处理 js 依赖项 我认为将 Foundation 5 设置到 djang
  • 如何在使用较少内存的情况下在单列中存储多个值?

    我有一张桌子users其中 1 列存储用户的 角色 我们可以分配多重角色给特定用户 然后我想将角色 ID 存储在 角色 列中 但是如何才能以易于使用的方式将多个值存储到单个列中以节省内存呢 例如 使用逗号分隔字段进行存储并不容易并且会占用内
  • 这段嵌套 for 循环反复将计数器加倍的代码的复杂性是多少?

    在书里编程面试曝光它说下面的程序的复杂度是 O N 但我不明白这是怎么可能的 有人可以解释这是为什么吗 int var 2 for int i 0 i lt N i for int j i 1 j lt N j 2 var var 你需要一
  • PIL 解码器 jpeg 在 ubuntu x64 上不可用,

    我知道这个问题看起来像是重复的 但我遵循了许多有关如何正确安装 PIL 的在线说明 但没有一个起作用 我已经尝试了一切 Python 图像库失败并显示消息 解码器 JPEG 不可用 PIL没有成功 当我运行 sudo pip install
  • Keras模型训练内存泄漏

    我是 Keras Tensorflow Python 的新手 我正在尝试构建一个供个人使用 未来学习的模型 我刚刚开始使用 python 并想出了这段代码 在视频和教程的帮助下 我的问题是 我的 Python 内存使用量在每个时期甚至在构建
  • 基于 CSV 的 Spark DataFrame 查询是否比基于 Parquet 的 Spark DataFrame 查询更快?

    我必须使用 Spark 从 HDFS 加载 CSV 文件到DataFrame 我想知道由 CSV 文件支持的 DataFrame 与由 parquet 文件支持的 DataFrame 是否有 性能 改进 查询速度 通常 我将如下所示的 CS
  • 使用 Google 进行 WPF 应用程序身份验证

    我发现了许多不同的 OAuth 解决方案以及一些库或纯请求 https github com googlesamples oauth apps for windows 然而 没有一个解决方案看起来像我真正需要的 目前 我的应用程序使用自己的
  • Durandal 2.0 - 用于嵌套菜单的子路由器?

    我正在构建一个应用程序 并希望显示一个 2 层菜单 并且两层始终可用 杜兰达尔2 0介绍了他们的新路由器 它支持 子路由器 可以更轻松地进行深度链接 我的问题 我可以永久加载我的 子 导航路线 并在父级不活动时呈现子菜单 还是 子路由器 设
  • 无空格黑白文本的正则表达式

    请告诉我如何检查正则表达式文本之间没有空格 如果您的意思是 检查字符串中是否有空格的正则表达式是什么 则以下模式将起作用 S 这将找到仅包含非空格 空格 换行符 制表符等 的任何字符串
  • 查找 List 中出现次数最多的数字

    有没有一种快速又好的使用 linq 的方法 怎么样 var most list GroupBy i gt i OrderByDescending grp gt grp Count Select grp gt grp Key First 或者
  • SliverAppBar(Flutter)中的最小高度?

    是否可以在 SliverAppBar 折叠时设置最小高度 如果是 我该怎么做 工作是在 SliverAppBar 中添加一个底部小部件 底部 首选尺寸 首选尺寸 尺寸 20 0 20 0 孩子 文本 这个问题的答案既是肯定的 也是否定的 如
  • 如何从MySQL中的select中删除?

    此代码不适用于 MySQL 5 0 如何重写它以使其工作 DELETE FROM posts where id SELECT id FROM posts GROUP BY id HAVING COUNT id gt 1 我想删除没有唯一 I
  • 嘲笑单例类

    我最近读到 创建一个类单例使得无法模拟该类的对象 这使得测试其客户端变得困难 我无法立即理解根本原因 有人可以解释一下是什么使得无法模拟单例类吗 另外 与创建类单例相关的还有其他问题吗 当然 我可以写类似的东西不要使用单例 它们是邪恶的 使
  • 一项工作中的错误会通过 mclapply 污染其他工作

    When mclapply X FUN 遇到某些值错误X 错误会传播到其他一些 但不是全部 值X require parallel test lt function x if x 3 stop else x mclapply 1 3 tes
  • 在 StringComparison 和 StringComparer 之间转换的优雅方式?

    一些 NET 方法使用字符串比较作为参数 有些使用字符串比较器 通常以以下形式比较器 差异是显而易见的 有没有一些优雅的方式如何获得字符串比较 from 字符串比较器或相反亦然 我总是可以编写使用的简单方法Case声明 但也许 NET 中已
  • React 组件中出现意外的标记“=”[重复]

    这个问题在这里已经有答案了 我可能缺少装载机吗 我认为我们应该能够在组件体中使用这些 ES6 函数 以避免必须执行 bind this syntax 反应文档 ERROR in client admin side components Fo
  • 用于可视化数学方程的库(如方程编辑器)[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我正在寻找一个 C 库 它将为我提供方程编辑器功能 我不是在寻找数学库来评估数学表达式 有什么建议么 我建议使用我的 WPF Math 分支 我已经
  • setTimeout()和设置参数

    我有一些 jQuery 代码 如下所示 mainNav2 gt li mouseleave function var someNum Math random this attr id someNum var t setTimeout Hid
  • div 上的滚动条带有溢出:自动和百分比高度

    是否可以创建一个可以根据浏览器大小进行调整并且可以滚动的 div 我想用overflow auto关于 div 和百分比高度90 页面的结构是 div style height 100 headerinfo div div style he