Div 高度 100% 并扩展以适合内容 [重复]

2023-12-01

我的页面上有一个 div 元素,其高度设置为 100%。身体的高度也设置为 100%。内部 div 有背景等,并且与正文背景不同。这适用于使 div 高度为浏览器屏幕高度的 100%,但问题是该 div 内的内容垂直延伸超出了浏览器屏幕高度。当我向下滚动时,div 在您必须开始滚动页面的点结束,但内容超出了该点。如何让 div 始终到达底部以适合内部内容?

这是我的 CSS 的简化:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

一旦我滚动页面,黑色就会结束,内容就会流动到红色背景上。我在 #some_div 上将位置设置为相对还是绝对似乎并不重要,无论哪种方式都会出现问题。 #some_div 内的内容大部分是绝对定位的,并且它是从数据库动态生成的,因此无法提前知道其高度。

Edit: Here is a screenshot of the problem: div problem


这是您应该在 CSS 样式中执行的主要操作div

display: block;
overflow: auto;

并且不要碰height

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

Div 高度 100% 并扩展以适合内容 [重复] 的相关文章

  • 仅 IE9_有时_会忽略

    我们正在开发一个大量使用 这是典型的 TYPO3 网站 该网站是在子目录中开发的 稍后将被重新定位到顶级目录 因此我们无法轻易删除 我们的客户告诉我们 有时当她浏览新页面时 她得到的页面内容没有应用布局 我们对此进行了调试 仅在 IE9 中
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 如何在 select2 下拉列表中换行?

    我正在使用 select 2 下拉菜单 然后在其内容中显示一些长句子 我想在句子的正确位置添加换行符 但下拉菜单是自动调整的 For example the content of the dropdown right now looks l
  • html 选择列表 - 通过传入变量获取文本值?

    我有一个显示列表语言的选择列表
  • 获取 FileReader() 的结果对象

    有什么方法可以在不通过函数的情况下获取 FileReader 的结果对象 我在下面制作了示例代码 HTML br br br div div JS var code lorem ipsum input type file change fu
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何在更大的 div 中垂直和水平居中一个 div?

    如何将一个 水平居中于另一个 中 我设法使用已接受答案中的样式水平居中 我怎样才能让它垂直居中 内部 div 的高度未知 https stackoverflow com questions 114543 how to center div
  • 在表格上使用上下文样式将点边框应用于特定单元格

    我以前有过问了一个问题 https stackoverflow com questions 6326266 issue with applying dotted border to cells in table design在这个问题上 你
  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • HTML5 MediaSource 适用于某些 mp4 文件,但不适用于其他文件(相同的编解码器)

    我正在玩 MediaSource API 代码直接取自 Mozilla 的示例页面 https developer mozilla org en US docs Web API MediaSource endOfStream https d
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • Firefox 不会在使用 jQuery AJAX 加载的内容上呈现 CSS 样式

    我有一个网站 允许用户对书籍和文章发表评论 主表单有一个搜索输入 用于查找相关书籍或文章 来源 我使用 jQuery 根据输入的搜索词从外部站点动态加载新源 然后还使用 AJAX 返回列表中的源 我有两个问题 现在 在用户输入四个字符后 j
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • 使用 CSS 或 Javascript 填充动画

    我只是想知道是否可以使用 CSS 或 javascript 创建填充动画 基本上我想创建一个填充动画 如下图所示 http i40 tinypic com eit6ia png http i40 tinypic com eit6ia png
  • 页面上使用 HTML Editor Extender 进行回发会导致 IE11 中出现 JavaScript 错误

    我已将 HTML 编辑器扩展程序添加到我正在处理的页面中 现在每当我在页面上发回帖子时 都会收到以下 Javascript 错误 JavaScript 运行时错误 参数无效 之后什么也没有发生 这在 IE10 或更低版本以及我所知道的所有其
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 如何创建适合屏幕宽度的等宽/高框? [复制]

    这个问题在这里已经有答案了 我正在尝试建立一个网站 其中有很多宽度和高度相等的框 例如 我有一个页面 其中并排有两个相同大小的框 简单的解决方案是将宽度和高度设置为 50vw 这在出现滚动条之前效果很好 我已经用谷歌搜索了几个小时 但无法理

随机推荐

  • Jenkins Pipeline - SVN 轮询

    我有一个 Jenkins 管道模板 它在 Subversion 中使用 Jenkins 文件 Jenkins文件有svn checkout方法来签出真实的应用程序 真实应用程序的svn url是从jenkins环境变量传递的 我需要对实际应
  • Cron 作业在特定时间启动和停止

    是否可以设置一个 cron 作业只在某些日子的晚上工作 例如每个月的第一天下午 3 点到晚上 9 点 我只想在晚上服务器负载较低时进行电子邮件营销活动 是否可以在某个时间运行一个 cron 作业并在某个时间停止它 您可以在晚上 9 点使用第
  • 如何在 Firebase 数据库中解压多层嵌套 JSON

    在我的应用程序中 我会定期有一个 JSON 主题 例如message 然后嵌套在其中是random ID 那么message文本作为随机 ID 内的字符串 但是 我需要破译多个级别的随机 ID 在 Firebase for Swift 中这
  • Cosmos DB 中是否支持使用 OData 进行分页?

    我可以看到通过 SQL API 访问 Azure 中的 Cosmos DB 时支持偏移 限制 但 OData 是否支持此功能 UPDATE 您可以下载my demo在github上 和本文 and 官方文件可以帮助你 我的存储帐户中的数据
  • 根据条件运行中间件 - Laravel

    我有一个中间件 用于检查请求中的特定标头参数并根据该参数发回响应 但我遇到的问题是我不希望这个中间件始终在我的控制器中的函数上运行 我希望如果函数中的条件为真 例如 存储函数 中间件就会运行 我怎样才能实现这个目标 在执行控制器操作之前调用
  • 向量化 seq 的优雅方法?

    尽管标题相似 但这不是同一个问题在 R 中向量化rep和seq 我的近期目标 给定一个向量 我想生成一个新向量 其中包含原始值以及旧值中每个值之间的规则间隔 这并不难 一种策略是使用更通用的函数 给定两个向量和一个指定的by间隔 使用相同的
  • git commit 的 --date 参数的格式是什么

    我需要覆盖 Git 的提交日期 所有文档都指向 date参数 但随后就留下了一个不知道适当格式的线索 我已经尝试了我能想到的所有排列 我得到 致命 日期格式无效 每一个的错误 Git 2 6 2015 年第 3 季度 添加了一个新选项 Se
  • jQuery 热键:防止 IE 运行自己的快捷方式,例如 Alt+H

    Using jQuery hotkeys I try to bind shortcuts like Alt H Alt C to some specific actions in my site The event propagation
  • 在python中,如何检查字符串是否同时包含大写和小写字母

    我看过另一个帖子 和我的问题类似 密码检查 Python 3 除了我的问题涉及检查密码是否同时包含大写和小写问题 我的代码如下 但是执行时它无法识别密码中的小写和大写字母 它只识别一种类型 我怎样才能让它识别这两种类型 还有一种更简单的方法
  • 推送通知后离子设置徽章

    我在用着IONIC框架 我想在收到推送通知后设置应用程序的徽章 当我的申请关闭时 有办法做到这一点吗 这是为其他遇到同样问题的人准备的 我相信您正在谈论使用从服务器收到的更新徽章编号使徽章可见 首先要在 Push 的 init 方法的代码中
  • 设置对话框列表中文本的样式

    我使用了这里给出的说明 http developer android com guide topics ui dialogs html AddingAList在对话框中创建列表 问题是我似乎没有找到将长文本包装在选项内的方法 请看下图 请告
  • V8如何管理对象实例的内存?

    http code google com apis v8 design html 上一页解释了 v8 团队用于实现快速属性访问的优化技术 但它的对象实例又如何呢 新属性可以随时添加到对象中 因此应该允许其大小增长 它是否只是简单地分配默认大
  • Android java.lang.ClassCastException:android.widget.RelativeLayout 无法转换为 android.widget.EditText

    当我点击一个按钮从一个活动转到另一个活动时 我在 Android 中遇到以下异常 我是 Android 开发新手 所以这可能不是最聪明的问题 java lang ClassCastException android widget Relat
  • 请求如何确定响应的编码?

    怎样才能有回应apparent encoding属性不正确 我有下面的代码片段 演示了我的问题 import requests url https item jd com 100000177760 html r requests get u
  • 将单元测试添加到现有的 ASP.NET Web 表单应用程序

    我有一个现有的 asp net webforms 应用程序 我想添加一些单元测试 但不确定具体如何进行 该应用程序是数据库驱动的功能 我想您可以将其与高级论坛进行比较 逻辑 数据访问和表示大部分是分开的 我应该测试什么方法 如何处理数据库和
  • VSCode TypeScript Intellisense 不工作

    从字面上看 我在这里拔掉了我的头发 Mac 上的 VSCode 1 6 0 Typescript 2 0 2 但我也尝试过 2 0 0 我尝试过以 es5 es6 为目标 无论是否有 commonjs 模块目标 我无法获取项目本地其他文件的
  • Prolog:停止条件?

    这是一个非常简单的 Prolog 知识库 spouse bill cheryl married X Y spouse X Y married X Y spouse Y X 我运行了以下查询 请注意 有时答案是正确的名称 仅 但有时答案是正确
  • PHP 语法错误 T_ENCAPSED_AND_WHITESPACE

    我开始学习 php 基础知识 但在理解如何将代码与字符串混合在一起时遇到一些问题 我发现了一种很棒且有用的样式来打印字符串块 但我不知道名称 也无法找到示例 下面的代码返回错误 解析错误 语法错误 意外的 T ENCAPSED AND WH
  • 如何使用 C# 以编程方式创建 VC++ 项目?

    我想用C 创建一个VC 项目 我看到这个MSDN 文章关于创造C and VB console application projects 但是VC 项目怎么办呢 ADD 1 我遇到了与下面的线程完全相同的问题 它的解决方案是操纵原始XML
  • Div 高度 100% 并扩展以适合内容 [重复]

    这个问题在这里已经有答案了 我的页面上有一个 div 元素 其高度设置为 100 身体的高度也设置为 100 内部 div 有背景等 并且与正文背景不同 这适用于使 div 高度为浏览器屏幕高度的 100 但问题是该 div 内的内容垂直延