内容在具有固定页眉/页脚的移动页面上滚动

2023-12-15

您好,我正在构建一个移动网页,其中我的内容只会滚动,页脚和页眉位置为:固定 - 我可以制作内容,使其不会在页眉或页脚下方滚动,以便它只在自己的位置滚动分区

我想这样做的原因是我的页眉和页脚将有一些不透明度,如果内容滚动到下面,它看起来就不太好。

这是我制作的一个 jsfiddle 来向您展示滚动的示例

http://jsfiddle.net/VNVqs/


给你:

http://jsfiddle.net/VNVqs/3/

我刚刚删除了position: absolute到滚动部分(wrapper and 滚动内容),并添加了一些padding到包装器,以便让第一个和最后一个项目不在页眉和页脚下。

基本上,这个技巧是通过使用来完成的position: fixed 仅在页眉和页脚上, 然后让页面的其余部分像普通页面一样滚动,不使用overflow: auto在特定的固定高度元素上。这样做,唯一的问题是内容的第一行将始终位于固定位置标题下(以及页脚下的最后一行),但您可以通过在内容包装器上应用一些填充来解决此问题,尽可能多页眉(和页脚)高度。你说对了?

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

内容在具有固定页眉/页脚的移动页面上滚动 的相关文章

  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 如何防止弹性项目高度因其内容而溢出[重复]

    这个问题在这里已经有答案了 我刚刚开始学习 Flex 到目前为止我印象深刻 但是 我对包含页眉 页脚和三列的全页应用程序遇到了问题 第一列包含一个项目列表 由于我无法为其父级设置固定高度 因此每次列表增长时 它都会将页脚向下推 这是一个带有
  • 使用 CSS 覆盖透明 div 中的不透明文本

    我试图使透明 div 内的文本没有不透明度 也就是全黑 div style background 3cc p style background 000 This text should be all black p div 只用 CSS 就
  • Twitter bootstrap 3表单水平和单行多个输入列

    我需要将多列输入放在单行中 如下所示 我通过将多个输入分组为一个来做到这一点form group 但是这样我不能使用has error class div class form group div
  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 在 Bootstrap 中使用 CakePHP 时如何修改包装器 div 错误类

    我在用着Bootstrap 3 0RC1 with CakePHP 2 3 6 尝试利用那些漂亮的课程 例如has error and has warning for 验证状态 http getbootstrap com css forms
  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • 固定宽度可变高度网格CSS

    我们如何在网格布局中实现固定宽度和可变高度 就像www pinterest com http www pinterest com主页布局 我认为他们正在使用 Javascript 只是想知道是否还有其他方法 只需使用float left不管
  • Textmate“注释”命令对于 css 代码无法正常工作

    当我在 TextMate 中切换 CSS 源代码的注释时遇到一些问题 Using the shortcut CMD I activate the Comment Line Selection command from the source
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • dom 元素转换后 IE 显示水平滚动条

    我在网站的各个地方使用了以下 css http jsfiddle net uycq29mt 1 http jsfiddle net uycq29mt 1 a position absolute background red width 60
  • 无法更改 SVG 元素的类名

    我想通过单击按钮来更改应用于 SVG 的类 代码是here http jsfiddle net p19rnmev 我的 SVG 看起来像
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • 双弧形

    我目前正在尝试生成 波浪形幽灵底部 形状 该形状包含两条双曲线 虽然底部的部分这个图片 http images clipartpanda com ghost clip art castle ghost clipart1 jpg我认为以更好的
  • CSS Overflow 属性在 iPad 中不起作用

    我正在为 iPad 设计一些 html 页面 在尝试像 yscroll auto 这样的 css 溢出属性时 iPad 中没有出现滚动条 内容也没有滚动 我在 ipad 模拟器和设备中尝试过 有没有其他方法可以实现这个属性 请帮帮我 提前致
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 使水平滚动条始终可见,即使底部不在视图中

    我将用一个片段来开始这个问题 该片段几乎显示了我想要完成的任务 wrapper overflow hidden display flex sidebar min width 200px background 333 color FFF co
  • 如何在 Bootstrap 3 中指定行高?

    使用 Bootstrap 3 我将 row 类的高度设置为 3 5em 我在行中有几个输入 它们与行的顶部对齐 我想让它们底部对齐 我尝试过垂直对齐 底部的样式 但这似乎不起作用 我想让东西底部对齐的原因是我有一个浮动标签 我在输入字段上方

随机推荐

  • 在 R 中,找到每行包含字符串的列

    我一定是用了错误的搜索词来思考 因为我不敢相信我的问题是独一无二的 但我只找到了一个类似的问题 我有一些来自世界银行的相当笨重的数据 它们是代表数据库的平面文件 数据每行一个项目 但每个项目都有多个特征 这些特征方便地位于名称为 SECTO
  • 如何在 JNI 中将 C 结构体来回传递给 Java 代码?

    我有一些通过 JNI 调用的 C 函数 它们采用指向结构的指针 还有一些其他函数将分配 释放指向相同类型结构的指针 以便处理我的包装器更容易一些 令人惊讶的是 JNI 文档很少提及如何处理 C 结构 我的 C 头文件如下所示 typedef
  • Rails 4:before_filter 与 before_action

    在 Rails gt 4 0 0 中 生成器创建 CRUD 操作before action not before filter 它似乎做了同样的事情 那么这两者有什么区别呢 尽我们所能see in ActionController Base
  • 如何在ipad应用程序中录制视频剪辑并将其存储在文档文件夹中

    我有一个训练应用程序 我希望当用户单击 recordVideo 按钮时 相机应该启动来录制视频 有什么方法可以在 ipad 应用程序中执行此操作 我已经完成了音频录制 我需要进行视频录制 for video import
  • Socket.io 未在握手中发送 cookie,导致请求停止

    让我解释一下我的设置 我有多个域名 它们都是主域名的 CNAME 记录 例如 example com example com gt 服务器IP company1 example com gt example com company2 exa
  • 如何使用 Inno Setup 在网络连接/断开事件上添加计划任务

    我想使用 Inno Setup 进行程序安装 并且需要 Inno Setup 在 Windows 任务计划程序中创建一个任务来启动我的程序program exe每次连接互联网时 I can 手动执行此操作 但我希望 Inno Setup 通
  • 在 EF 4.1 代码中,UnitOfWork 和 GenericRepository 模式是否多余?

    想知道我是否需要使用 Genericrepository 模式和 UnitOfWork 来模拟存储库 我正在使用 MOQ 现在它是多余的吗 因为我注意到 EF 4 1 有 IDBSet 我还没有弄清楚如何编写使用 IDBSet 的通用内容
  • 使用 MVVM 实现使用 IDataErrorInfo 验证数据时出现异常

    我正在尝试使用 IDataErrorInfo 验证 MVVM 应用程序中的数据 但遇到了一些问题 当我将 TextBox 设置为无效值时 验证工作正常 但是当我将 TextBox 的值设置为有效值后 我收到此异常 A first chanc
  • Java 有编码标准吗?

    我可以开发一个应用程序 项目 但这不符合正确的编码标准 它需要大量的内存 并且其他人不容易理解它 编码的通用标准是什么 我有一个问题 例如如何命名变量方法以及打包类的最佳方法是什么 像那样 为此 是否有任何教程或示例请分享 提前致谢 您需要
  • 如何统计datagridview列中的特定值

    In a DataGridView我需要计算一列有多少个重复值 这是我的数据网格视图 例如 我想计算 RisFin 列中有多少个 X 并将结果放入文本框中 你可以这样计算你需要的东西 var count this dataGridView1
  • Js中图像到ArrayBuffer

    您需要获取 jpg 并转换为 arrayBuffer 有人知道如何做到这一点吗 我尝试使用下面的函数 但对于 Microsoft API 没有成功 document querySelector inputImage addEventList
  • Android:将RawFile复制到Sdcard(视频mp4)

    这段代码有什么问题 我的项目中有一个 Raw 文件 mp4 视频文件 当我这样做时 然后我从 SD 卡检索文件文件不完全相同 因此无法加载视频 您还有其他方法自动将原始文件复制到 SD 卡吗 Thanks String FICHIER BL
  • Angular 6 中 mat-datepicker 的 UTC 日期

    我用过mat datepicker对于我的 Angular 6 项目 但在日期选择器中显示当前时区日期 相反 我需要显示当前的 UTC 日期 这是我的代码 ts file var nowDate new Date this startdat
  • 为什么 fprintf 和 fscanf 不能与管道一起使用

    我已经编写了创建管道的程序 将一个数字写入管道 从管道中读取它并将其打印到标准输出 但似乎 fscanf 看到空的管道流 尽管我做了 fflush 为什么 fprintf 不打印任何内容 int main int fd 2 pipe fd
  • Python 中的 GUI 应用程序用于快速更新屏幕图像

    我提前为我的菜鸟行为道歉 我刚刚开始编程 你能为我指明 GUI 框架的正确路径吗 看着GUI 框架列表考虑到我普遍缺乏专业知识 这是相当令人畏惧的 Summary 我正在尝试用 python 编写一个 GUI 它可以使用 numpy 以数学
  • axios - 如何处理大整数

    这是我的要求 axios get url then res gt console log res data 输出是 value 156144277082605255 但应该是 value 156144277082605250 在这种情况下如
  • jQuery ui.draggable 不调用自定义函数

    我有一个 JavaScript 函数 showAlert 有一个可拖动的图像 拖动停止后 我们需要显示警报 它不起作用我们如何纠正它
  • 来自 GDB 的消息“启动期间程序因信号 SIGKILL 终止”

    我在 AIX 上调试使用 GNU 工具构建的 C 程序时遇到问题 当程序在调试器之外运行时 bash 4 3 cryptestcwd v Segmentation fault core dumped 当程序在GDB下运行时 调试器打印消息D
  • 像缓冲区一样围绕折线创建多边形

    我环顾四周 找到了如何获取折线并在其周围创建缓冲区的示例 这样我最终得到了一个多边形 到目前为止 我发现我需要 Minkowski Sums 来做到这一点 但我无法理解原始算法并将其转换为代码 我更喜欢 C 中的示例或算法的演练 您可以使用
  • 内容在具有固定页眉/页脚的移动页面上滚动

    您好 我正在构建一个移动网页 其中我的内容只会滚动 页脚和页眉位置为 固定 我可以制作内容 使其不会在页眉或页脚下方滚动 以便它只在自己的位置滚动分区 我想这样做的原因是我的页眉和页脚将有一些不透明度 如果内容滚动到下面 它看起来就不太好