当内容扩展超过窗口大小时,在绝对定位元素上设置 100% 高度

2023-12-24

因此,在阅读 Stack Overflow 和网络之后,我发现实现 100% 高度有两个主要技巧:

  1. 在 HTML 和 BODY 上设置 height:100%
  2. Set your element to have either:
    • 高度:100%,或
    • 顶部:0,底部:0,位置:绝对

然而,即使使用这些技巧,我也很难将绝对定位的 DIV 的高度设置为真正的 100%。我可以获得 100% 的视口大小,但如果用户向下滚动,很明显 div 并不真正具有 100% 的高度。

我在这里做了一个简单的 JS Fiddle:http://jsfiddle.net/9FEne/ http://jsfiddle.net/9FEne/

我的问题是:有谁知道任何进一步的技巧来获得真正的(即内容高度,而不是视口高度)100%高度绝对定位的div?


抱歉,我之前错过了真正的问题,以为你想要填满窗口。如果问题是内容比窗口长,那么您需要添加position:relative到身体。http://jsfiddle.net/9FEne/7/ http://jsfiddle.net/9FEne/7/

发生的情况是,当您绝对定位某些东西时,它会相对于最近的定位元素进行定位(和调整大小)。如果您不告诉它定位到主体,那么它将定位到窗口。

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

当内容扩展超过窗口大小时,在绝对定位元素上设置 100% 高度 的相关文章

  • Highcharts - 使用选定的饼图切片获得 3D 效果

    在 highcharts 中 我试图使当用户选择或将鼠标悬停在饼图的切片上时 该切片会产生沿 z 轴 朝向用户 上升的效果 我试图通过 css 设置阴影过滤器并使切片的边框更宽 填充颜色相同 来实现此目的 然而 我面临的问题是切片仍然可以位
  • 在具有不同边框的 div 上调用函数

    我有一个div对于一个名为 ball 的类 div 的每个边缘都有一个边框 顶部边框 左侧边框等 当用户单击每个边框上的边框时 我想用 JavaScript 触发不同的事件 例如 用户点击边框顶部console log top 等等 HMT
  • jquery UI datepicker仅月份和年份的css定位问题

    我已经实施了这里讨论的解决方案 JQuery 日期时间选择器 只需选择月份和年份 https stackoverflow com questions 4079525 jquery datetime picker need to pick m
  • 垂直对齐多行文本(菜单元素)?

    我正在尝试垂直对齐 UL 内的文本 问题是某些列表项具有不止一行文本 因此无法使用行高 小提琴 http jsfiddle net jaAYT http jsfiddle net jaAYT 这是我想要达到的结果 http img402 i
  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做
  • rvest 和 NHL 统计数据的 CSS 选择器问题

    我想从 hockey reference com 中抓取数据 特别是从以下链接中抓取数据 https www hockey reference com leagues NHL 1991 html https www hockey refer
  • 如何获得 calc() 函数的无单位结果

    我正在使用此计算来获取网页中的流体行高 line height calc 1 42em 1 55 1 42 100vw 300px 1080 300 数学是工作属性 除非我改变font size特定部分 因为line height应使用无单
  • 如何在非 CSS3 浏览器上制作圆角?

    我知道在这种情况下我必须使用图像 每个角一个 例如 如果我需要给定元素周围有一个 4px 的纯蓝色边框 边框半径为 8px 我相应地设计了四幅图像 左上角 png 右上角 png 左下角 png 右下角 png 如果可能的话 我应该如何实现
  • 鼠标悬停时放大图像而不使用 Jquery 推送其他图像?

    当您将鼠标悬停在图像缩略图上 例如 Google 图片正在使用的缩略图 时 我正在尝试创建图像放大效果 但是 我遇到了一个问题 即放大的图像根据放大的图像的位置不断将另一张图像推到另一个位置 这是我到目前为止所拥有的
  • 严格/过渡 DOCTYPE 之间的浏览器渲染差异

    前段时间我遇到了一个 问题 但我从未深入了解过 希望有人能够照亮它 当我将 DOCTYPE 从严格更改为过渡时 是什么导致某些浏览器 Chrome Opera 和 Safari 以不同方式呈现页面 我知道造成这种情况的一般原因是触发了怪异模
  • css 适用于 Firefox/Chrome,但不适用于 IE

    我有这个 HTML 和 css 在 chrome firefox 中工作正常 但在 IE 上 标题布局超出了位置 并且悬停时未显示子菜单 您能帮忙吗
  • 我正在尝试向我的 vue.js 项目添加背景图像

    我想添加覆盖整个页面的背景图像 然而现在看起来是这样的 我希望它跨越整个网页 在 vue js 中这将如何完成 我还想要一个动画工具栏 以便当页面不滚动时工具栏是透明的并呈现背景图像的外观 当它滚动时 工具栏将具有当前的蓝色 这是我的小提琴
  • 自动调整Google网站嵌入代码的高度(html)

    我正在使用 Google 协作平台嵌入 HTML 代码 将代码粘贴到 从网络嵌入 窗口中 输出的长度是可变的 我希望有一种方法可以动态调整父级的高度iframeGoogle 协作平台用于托管我的 HTML 我知道我可以使用 Google 协
  • 如何在 font Awesome 图标链接下方添加添加文本?

    我正在尝试在我的 Blogger 模板中的 font awesome Icons 下添加一些文本 这是我想要实现的目标的图像 我想要实现的外观图片 https i stack imgur com BVYlh png 但到目前为止我已经做到了
  • 是否可以使用 Flying Saucer (XHTML-Renderer) 将 css 解析为类路径资源?

    我正在尝试将资源打包到 jar 中 但我无法让 Flying Saucer 在类路径上找到 css 我无法轻松构建 URL 来无缝解决此问题 https stackoverflow com questions 861500 url to l
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • IE 中的 HR 标签 - 删除边框

    在除 IE7 及更低版本之外的其他浏览器中 hr 在 hr 标签周围显示边框 但我不希望它出现 我已经尝试过这个解决方案 但它周围似乎仍然有边框 它看起来像这样 我该如何摆脱它 See http webdesign about com od
  • @font-face 和 font-variant 是个坏主意吗?

    如果我使用 font face字体和font variant small caps对于相同的选择器 字体将回退到 Safari 中的下一个系统默认字体 我该如何解决这个问题 我一开始在创建一个示例来复制您的问题时遇到了一些麻烦 这让我意识到
  • 在 HTML5 iOS 7 / iOS 8 中显示十进制键盘

    经过几个小时的搜索后 我只是有一个简单的问题 是否有可能在网络浏览器输入字段中显示小数键盘 input type number 只显示数字 但我需要在左下角使用逗号或点 我尝试过任何事情 pattern step等等 但没有显示十进制键盘
  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht

随机推荐

  • 如何将 dtype='datetime64[ns]' 转换为浮点数?

    我正在练习线性回归 在这里我将日期作为输入 x 传递并期望输出 y float x df Date values x x reshape 1 1 y df MeanTemp values MeanTemp column has float
  • 在 C# 中转换为泛型类型失败

    我希望通过创建动态 GetControl 方法来节省一些编码 我的想法是这样的 private T GetControl
  • Rust:为关联类型实现特征“From”(错误)

    这是我之前问题的后续问题 Rust 从标准输入读取和映射行并处理不同的错误类型 https stackoverflow com questions 59187274 rust read and map lines from stdin an
  • CSS 类选择器通配符[重复]

    这个问题在这里已经有答案了 所以我想知道是否有办法在 CSS 中添加通配符 我有几个课程是 button 0 button 1 button 2 button 3等在一个button元素 我想得到所有 button 类来定义 是否可以做类似
  • 提取括号之间文本的模式

    如何从中提取字符串 and 使用模式匹配或任何东西 例如 如果文本是 你好 Java 那么如何只得到 Java 尝试这个 String x Hello Java Matcher m Pattern compile matcher x whi
  • 我可以使用客户端 Javascript 执行 DNS 查找(主机名到 IP 地址)吗?

    我想使用客户端 Javascript 来执行从客户端计算机看到的 DNS 查找 主机名到 IP 地址 那可能吗 Edit 这个问题让我很痒 所以我在 Google App Engine 上建立了一个 JSON Web 服务来返回客户端的 I
  • FFmpeg-Python 音频在最终视频中丢失

    我试图将视频放置在背景图像之上 但生成的输出视频没有音频 有什么办法可以让音频保持原样吗 def ConvertVideo source background start end dest stream ffmpeg input sourc
  • 奇怪的 while 语句行为?

    我不明白为什么以下陈述不起作用 randomKey random choice list topic keys randomValue random choice topic randomKey current len randomValu
  • 在一个 Android 应用程序中拥有多个 SQLiteOpenhelper

    我想知道是否可以在同一个 Android 应用程序中拥有多个 DbOpenHelper 但使用它们在同一个数据库中写入和读取 因为我试图从 2 个不同的 OpenHelper 具有不同的名称 创建表 但似乎只有第一个可以创建 当我尝试运行第
  • CKNotificationInfo soundName 不起作用

    Sbuscription 的创建如下 可以用 但是没有声音 为什么 医生说 if you specify the string default for this property the system plays the default a
  • 如何在Java中获取特定年份的所有星期日的日期?

    我正在认真寻找这段代码 我是新程序员 实际上我想让所有日期都带有标志 这些日期都是特定年份的星期日 请 我热切地等待您的回复 创建一个新日历 将时间设置为 1 1 yyyy 和某个时间 检查当前日期是否为星期日 然后向前滚动一天 直到星期日
  • 如何让 djangorestframework 使用格式后缀返回 xml?

    我可以让 djangorestframework 通过格式后缀 json 返回 json 但不能通过 xml 后缀返回 xml http 127 0 0 1 8000 chat rooms json id 1 timestamp 2013
  • memmem() STL 方式?

    是否有 STL 算法可用于像 memmem 一样搜索缓冲区内的字节序列 我不知道这是否是好的代码 但是以下代码可以使用std search http www cplusplus com reference algorithm search
  • Xcode 4.2 中的未知类型名称“命名空间”

    我正在编译QCAR SDK 但是当我向项目中添加更多框架后 它提示错误 Matrices h ifndef QCAR MATRIX H define QCAR MATRIX H namespace QCAR Matrix with 3 ro
  • PHP MP3 标签处理

    我有一个 php 脚本 我想提供其中的音乐列表 这些文件被命名为 01 mp3 02 mp3 和 03 mp3 等 他们都有标签信息 我的问题是如何在我的 php 脚本中访问它 您需要一个脚本来解析 mp3 文件以访问数据 来自谷歌 htt
  • 增量附加 numpy.arrays 到保存文件

    我已经尝试过 Hpaulji 概述的这种方法 但它似乎不起作用 如何在python中将多个numpy文件附加到一个numpy文件中 https stackoverflow com questions 42204368 how to appe
  • 在文本字段 Flutter 内部添加阴影

    我有这个设计 我想将其用于我的应用程序 但我不太确定如何添加框阴影 阴影位于文本字段的内部 请问有人可以给我一些帮助并为我指出如何执行此操作的正确方向吗 文本字段顶部的框阴影 干杯 杰克 您可以使用容器作为背景来实现这一点 例如使用线性 坡
  • 列表框 itemtemplate 内的绑定问题

    我有两个单独的列表框绑定问题 其中的 itemtemplate 包含一个文本框 1 一个列表框绑定到一串字符串 如何在创建的文本框中显示每个字符串并同时允许两种方式绑定 如果不指定 Path 或 XPath 则不允许进行双向绑定
  • NHibernate 从 SymbolSource.org 加载符号

    我希望能够调试 NHibernate 但我从未加载过任何符号SymbolSource org前 我需要在 Visual Studio 中输入什么 url 才能加载 NHibernate 的符号 以便我可以正确调试它 我正在运行 NHiber
  • 当内容扩展超过窗口大小时,在绝对定位元素上设置 100% 高度

    因此 在阅读 Stack Overflow 和网络之后 我发现实现 100 高度有两个主要技巧 在 HTML 和 BODY 上设置 height 100 Set your element to have either 高度 100 或 顶部