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% 并扩展以适合内容 [重复] 的相关文章

  • jQuery 变量在定义时声称它是未定义的

    我试图在同一页面上有两个自动填充文本框 一个用于手机型号 input1 一个用于固件 input2 当两者都填充时 我希望显示一个带有ID input1input2 的div 但是当在input1 中输入值时 它声称phone 的变量未定义
  • 将 HTML 'label' 标签与单选按钮一起使用

    是否label标签与单选按钮一起使用吗 如果是这样 你如何使用它 我有一个显示如下的表单 First Name text field Hair Color color drop down Description text area Salu
  • 重新创建 CSS3 过渡三次贝塞尔曲线

    在 CSS3 过渡中 您可以将计时函数指定为 cubic bezier 0 25 0 3 0 8 1 0 在该字符串中 您仅指定曲线上点 P1 和 P2 的 XY 因为 P0 和 P3 始终分别为 0 0 0 0 和 1 0 1 0 根据苹
  • 重新加载更新的 javascript> 代码而不完全重新加载 html 页面

    我正在开发一个单页 Web 应用程序 它具有许多不同的功能和形式 当开发一个深度 我的意思是主页上没有的 功能时 我会经历这个循环 开发代码 编辑类和函数 刷新整个页面 一路点击 直到到达我需要测试的部分 有时加起来大约一分钟 测试新代码
  • html5 canvas 上的错误显示 lineWidth=1

    I have example https developer mozilla org samples canvas tutorial 4 5 canvas linewidth html https developer mozilla org
  • Beautifulsoup findAll 是如何工作的

    我注意到一些奇怪的行为findAll的方法 gt gt gt htmls p class slytherin p p class gryffindor p gt gt gt soup BeautifulSoup htmls html par
  • 如何在日期选择器中设置不在当前月份的单元格的样式

    我目前正在为我的 JavaFX 应用程序制作注册表 问题是 当日期选择器中的单元格不在页面的月份上时 我想让该单元格变灰 让我们看看我当前的日期选择器 我的日期选择器 正如您所看到的 我希望下个月的日期 27 日 28 日 30 日以及 1
  • 为什么网格项目不居中?

    由于某种原因 两个输入范围使网格中的前两项偏离中心 我假设这是因为它们的影子 DOM 样式 事实真的是这样吗 有谁知道为什么范围使项目 A 和 B 偏离中心 这是一个代码笔 https codepen io tOkyO1 pen QOeKL
  • 在流体设计中将元素的宽度调整为其高度的百分比,反之亦然? [复制]

    这个问题在这里已经有答案了 我正在制作响应式设计 无论屏幕尺寸是什么 它都必须保持其元素的比例 高度与宽度 所以我不知道任何元素的像素大小 并且我只能以 工作 我可以将宽度或高度设置为浏览器大小的百分比 但我不知道如何设置其他属性值 仅使用
  • 如何覆盖 bootstrap 表 td 样式?

    我正在使用 Bootstrap 3 3我有一个 HTML 代码如下 div table class table table striped tr td 03 td td 04 td td 05 td td 06 td td 07 td td
  • R Shinydashboard 自定义 CSS 到 valueBox

    我一直在尝试将 valueBox 的颜色更改为自定义颜色 超出 validColors 中可用的颜色 但一直无法这样做 我知道有一种方法可以使用标签来包含自定义 CSS 但是我无法将它们放在正确的位置 ui lt dashboardPage
  • 用于渲染 html 子集的 Django templatetag

    我有一些 html 在本例中是通过 TinyMCE 创建的 我想将其添加到页面中 但是 出于安全原因 我不想只打印用户输入的所有内容 有谁知道模板标签 最好是过滤器 只允许呈现 html 的安全子集 我意识到 Markdown 和其他人就是
  • 宽度:适合内容;在 Chrome 上工作,但在资源管理器上不工作

    我构建了一个应用程序 所有内容都在 Chrome 中完美显示 但如果我在 Windows 资源管理器中打开该应用程序 容器会比应有的小 我在用着width fit content 这是只适用于 Chrome 的东西吗 我怎样才能使其适用于所
  • 使用 :hover 作为元素的内联样式(使用 HTML/CSS/php)[重复]

    这个问题在这里已经有答案了 可能的重复 如何将 a hover 规则嵌入到文档中间的样式属性中 https stackoverflow com questions 131653 how do i embed an ahover rule i
  • 引导标签输入宽度

    我正在尝试使用引导程序标签输入 http timschlechter github io bootstrap tagsinput examples 以模态中包含的形式 像这样 div class form group div
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 将输入中每个单词的第一个字符设为大写

    我想知道如何在输入区域自动生成单词的第一个字符 目前我的代码是 Name
  • 没有类的 CSS 选择器

    我正在使用选择器来选择不具有一个类的所有元素 list th not foo some rules 我怎样才能将其应用到多个班级 list th not foo list th not bar some rules 上面的 CSS 当然不会
  • 弹出窗口的动态高度取决于内容,可能吗?

    是否有可能获得一个宽度始终为 400px 的弹出窗口 但根据弹出窗口中的内容动态高度 我已经看到了这个 但不知道如何将其应用到弹出窗口 调整 iframe 的宽度高度以适应其中的内容 https stackoverflow com ques
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码

随机推荐

  • 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 内的内容垂直延