CSS:如何让此覆盖层随着滚动延伸 100%?

2024-04-10

以下是所讨论问题的示例:

http://dev.madebysabotage.com/playground/overlay.html http://dev.madebysabotage.com/playground/overlay.html

您会看到整个页面上有一个灰色覆盖层,但如果向下滚动,则初始加载页面下方的内容没有覆盖层。

我有一个#overlaydiv 似乎在滚动过程中无法保持 100% 高度,因此尝试找出如何实现这一点。

这是完整的来源:

html {
  height: 100%;
  min-height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
  font-family: Georgia, sans-serif;
}

#overlay {
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10000;
}

header,
section,
footer {
  width: 800px;
  margin: 0 auto 20px auto;
  padding: 20px;
  background: #ff0;
}

section {
  min-height: 1500px;
}
<div id="overlay"></div>
<header>
  <h1>Header</h1>
</header>
<section>
  <p>Here's some sweet content</p>
</section>
<footer>
  <p>Here's my footer</p>
</footer>

position: fixed;在覆盖层上。

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

CSS:如何让此覆盖层随着滚动延伸 100%? 的相关文章

  • 如何从 bootstrap-markdown.js 调用 .getContent 和 .parseContent

    我是使用 Bootstrap 插件的新手 刚刚通过代码学院 http www codecademy com en skills make an interactive website 我真的很想用这个很棒的引导 Markdown 插件 ht
  • 将html表格保存到excel中[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我必须编写一个程序 定期读取网页并将
  • JavaScript 中带前导零的数字发生变化

    我使用 print 语句从 php 调用 javascript 函数来打印 html 代码 并且传入一个整数 但是 在 php 中传递的值与 javascript 函数接收到的数字不匹配 我不知道为什么 这是调用 javascript 函数
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • 删除圆形图像周围的边框

    我有一个圆形图像 png 文件 中间是透明的 我需要将图像内的背景设置为纯色 为此 我将背景设为纯色 然后将border radius 50 但这会产生一条丑陋的小白线 有没有办法摆脱这个问题 或者我必须在图像编辑器中手动为图像着色 div
  • Angular JS 中的数组

    我是 Angular JS 新手 我正在将元素推送到数组中 然后想使用 ng repeat 在 html 中显示 scope groupedMedia Adding elements through a for loop scope gro
  • Bootstrap 中的旋转字形 / Font Awesome

    我试图让引导站点中的字形在悬停时旋转 除了更改颜色之外 这是我的尝试 http jsfiddle net young greedo17 88g5P http jsfiddle net young greedo17 88g5P 使用此代码 d
  • Internet Explorer 中的锯齿状按钮边缘

    如何去除 Internet Explorer 中宽按钮的锯齿状边缘 例如 您还可以通过设置来消除 Windows XP 的按钮样式 以及 Windows 的所有其他版本 background color and or border colo
  • 当覆盖设置为 null 时,通过外部单击关闭 fancybox

    我正在使用 fancybox 2 1 4 插件 它工作得很好 但我有一个问题 我想将覆盖设置为空 并且当用户单击 fancybox 容器外部 时关闭 fancybox 我已经尝试过以下代码 但它不起作用 因为没有可供单击的覆盖层 fancy
  • 位图内存不足错误

    我对这个错误有疑问 我从 URL 制作网站图标解析器 我这样做是这样的 public class GrabIconsFromWebPage public static String replaceUrl String url StringB
  • CSS 无法从带有 php“includes”的相对路径工作

    文件夹结构 index php includes header html css style css 我的主项目文件夹中有 2 个子文件夹 一个是名为 includes 的文件夹 另一个名为 css 我有我的 index php主文件夹中的
  • 在随机位置启动 HTML5

    我有一个大约 2 小时长的音轨 我想在我的网站上使用它 我希望它在页面加载时在随机位置开始播放曲目 使用 HTML5 可以吗 我知道您可以使用 element currentTime 函数来获取当前位置 但是如何在完全下载之前获取曲目的总时
  • 检索 css3 缩放元素的宽度/高度

    我正在与 offsetWidth 属性的奇怪之处 我认为 作斗争 这是场景 比方说 我有一个span标签 在我的js中 在某个时刻我执行css3转换 对于这个元素 例如 el set styles transform scale scale
  • 使用 CSS 网格布局使网格项内的元素高度相等

    我在长度超过 4 的 div 中有一系列文章 没有任何舍入行标签 我需要将其表示为每行 3 篇文章 列 的表格 可能包含display grid 每篇文章都有页眉 章节和页脚 如何在每行文章内实现每个标题的等高 每个部分的等高以及与文章底部
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 如何将 Vue.js 作用域样式应用于通过视图路由器加载的组件?

    如何将 Vue js 作用域样式应用于通过以下方式加载的组件
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a
  • 适用于移动设备的响应式订单确认电子邮件?

    我从未见过令人惊叹的订单确认 发票电子邮件 即使是最好的 html5 网站也会发送糟糕的订单确认电子邮件 有时是纯文本 我相信这是因为发票通常需要使用表格来显示购买的物品 这在移动设备上实现起来非常困难 我发现了一些让手机上的表格更易于管理
  • 我可以使用 ASP.NET WebForms 母版页在每个内容页中包含不同的 javascript/css 文件吗?

    我有几个使用相同母版页的内容页 它们并不都需要包含在相同的 javascript 和 css 文件中 tag 是否可以更改内容来自内容页面的标签 确实如此 但我建议采取一些不同的做法 我在关闭正文标签的正上方放置了一个内容占位符 然后我填充
  • 如何垂直对齐div内的图像

    如何在包含的内容中对齐图像div Example 在我的示例中 我需要将 img in the div with class frame div class frame style height 25px img src http jsfi

随机推荐

  • 在 selenium 中将页面向上滚动到顶部

    如何将网页滚动到页面顶部 我知道将页面滚动到底部是 window scrollTo 0 document body scrollHeight 就像这样可以将页面滚动到顶部吗 要滚动到页面顶部 只需滚动到0 0 window scrollTo
  • Jest + React-testing-library - 等待模拟的异步函数完成

    My componentDidMount 触发对异步函数的调用 但根据该函数的结果 它可能不会导致任何 DOM 更改 有什么方法可以等待该函数在测试中完成吗 这是一个示例 单击按钮最初被禁用 如果异步函数返回 true 则应启用单击按钮 m
  • Magento 多个 Authorize.net 网关

    我有一个用于处理信用卡付款的 CAD 和 USD 网关帐户 这两个帐户均来自支持 Authorize net API 的支付提供商 我已经使用 Magento 的内置 Authorize net 支持成功配置了一个 但是如何配置第二个 Au
  • 在终结器中抛出异常以强制执行 Dispose 调用:

    这是我认为推荐的典型 IDisposable 实现 SomeClass Dispose false public void Dispose GC SuppressFinalize this Dispose true protected vi
  • 使用 Youtube API 和 onBehalfOfContentOwner 的 CMS 频道列表

    我正在使用 Youtube Data API 进行有针对性的查询 就像这个例子 https developers google com youtube analytics v1 reference reports query 对于 MCN
  • Cassandra 备份,包括架构

    我感兴趣的备份技术有两种 a SCHEMA 备份 恢复数据库模式 添加或删除列 更改列类型 添加表等 b 数据备份 恢复数据 更新 从一个表读取到另一个表 让我通过例子来解释一下 首先 我创建实体 客户 Customer 编号 名称 11
  • 数据表:如何将类设置为表行单元格(但不是表头单元格!)

    我的桌子有一个非常漂亮的风格 抱歉 链接不再有效 我必须添加 sClass 以便新行 由 fnAddData 添加 获得正确的类 不幸的是 这破坏了我的布局 因为这些类也被添加到我的表头单元格中 抱歉 链接不再有效 如何配置 sClass
  • 为什么必须为方法引用显式指定类/对象名称?

    当我想引用当前范围内的方法时我仍然需要 指定类名 对于静态方法 或this before 操作员 例如 我需要写 import java util stream Stream public class StreamTest public s
  • 如何使用 Apache PDFBox 从 PDF 中的按钮图标提取图像?

    我想使用 java netbeans 从 pdf 中的按钮获取图像图标 并将其放在某个面板中 然而我在这里碰了砖头 我使用 PDFBox 作为我的 PDF 导出器 但我似乎理解不够 我已经成功地从表单字段中读取内容 但是只要我尝试在 PDF
  • 处理 SFSafariViewController 中的弹出窗口/选项卡

    我正在我的应用程序中实现 SoundCloud 登录流程 应用程序打开https soundcloud com connect in an SFSafariViewController with a redirect uri它使用我的应用程
  • Java 包结构中的模块与层

    我曾经把所有东西都放在这样的包中 com company app module1 com company app module2 但它使得基于包的 AOP 切入点变得困难 并导致需要 IDE 才能理解的巨大包 所以现在我意识到我需要一个更深
  • jqm 弹出窗口未打开

    我向 div 容器添加了一个弹出窗口 打开弹出窗口不起作用 这是我的容器结构 div div div style display none a class select Button a div ul ul div div
  • 为什么 Node.js 是异步的?

    实际上没有人问过这个问题 从我得到的所有 建议 以及我在这里问之前的搜索 那么为什么 Node js 是异步的呢 经过一番研究后我得出的结论是 像 PHP 和 Python 这样的语言是脚本语言 我可能对脚本语言的实际语言是错误的 而 Ja
  • auth.uid 是共享秘密吗?

    看来 当有人通过 oAuth 进行身份验证时 Firebase 会创建一个看起来像这样的 uidgoogle 111413554342829501512 例如 在 Firebase 规则中 您可以执行以下操作 读取和 或写入 read ro
  • Ember.js 在特定页面上包含外部脚本

    我试图弄清楚如何包含外部 javascript 源 图表 但仅限于网站上的单个页面 可以在视图或模板中完成吗 我发现只需添加页面模板不起作用 如果我将它添加到整个网站的模板中 它加载得很好 但是它会加载到每个页面上 我的问题的另一面可能更具
  • 如何使用“git submodule”查看子模块的特定版本?

    我该如何为特定标签或提交添加 Git 子模块 子模块存储库保持指向特定提交的分离 HEAD 状态 更改该提交只需检查不同的标签或提交 然后将更改添加到父存储库 cd submodule git checkout v2 0 Previous
  • .NET 4 中的 Math.Round() 行为[重复]

    这个问题在这里已经有答案了 可能的重复 在 C 中 Math Round 2 5 结果是 2 而不是 3 你在开玩笑吧 https stackoverflow com questions 977796 in c math round2 5
  • 如何更改弹出菜单中所选项目的颜色?

    我已经设置了背景颜色和文本颜色以及一些其他颜色属性 例如禁用和未选择的颜色 但似乎都没有更改所选项目的背景颜色 如果我必须更改以下属性才能使其看起来像我想要的那样 或者我需要在我的代码中添加什么 我有以下内容
  • 使用 ARM NEON 内在函数添加 alpha 和排列

    我正在开发一个 iOS 应用程序 需要相当快地将图像从 RGB gt BGRA 转换 如果可能的话 我想使用 NEON 内在函数 有没有比简单分配组件更快的方法 void neonPermuteRGBtoBGRA unsigned char
  • CSS:如何让此覆盖层随着滚动延伸 100%?

    以下是所讨论问题的示例 http dev madebysabotage com playground overlay html http dev madebysabotage com playground overlay html 您会看到