程序员经验分享-hwhale

在 CSS 中创建具有可滚动内容的可变高度“固定”标题

2024-01-12

我想在页面上创建一个标题，当您滚动页面时该标题不会移动。

这看起来很简单，只需将“position:fixed”添加到样式中，但内容就会出现在标题下方，因为标题“从流中删除”。所以我认为的解决方案是在内容中添加“margin-top: height”。

当标题的高度可变时，解决此问题的最佳方法是什么？

我有一个小提琴来演示这个问题：

http://jsfiddle.net/waterlooalex/j4Z8F/2/ http://jsfiddle.net/waterlooalex/j4Z8F/2/

如果您的浏览器窗口不太大，内容文本将滚动到“hello world header”下方，问题是第一行文本“Lorem ipsum...”被隐藏。我有一些注释掉了 javascript解决这个问题。


您可以添加标题 div 的第二个副本，即not固定并使用类似的东西visibility:hidden在上面。这样，它就可以将内容推送到您需要的确切位置，但无需使用 JavaScript。有点黑客，但我在你的小提琴中尝试过，它有效。

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

css

header

cssposition

在 CSS 中创建具有可滚动内容的可变高度“固定”标题 的相关文章

  • 图像下方不需要的边距

    我有一个图像和一个 div 我想将其放置在其下方 这是小提琴 http jsfiddle net d3Mne 1 http jsfiddle net d3Mne 1 问题是两者之间存在差距 此下边距仅出现在图像中 有什么办法可以去除吗 Se

  • 这个 CSS 选择器是什么？ [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height

  • 使用 PHP 将 class="active" 添加到活动页面

    动态标头 CSS 类更改为活动使用 PHP 目录 我想要的班级 li 在活动目录下更改标签 现在 每个指南都向我展示了当您的页面等于它时如何执行此操作 但我想更改 这 li li 取决于我所在的目录 例如 如果说我在 http exampl

  • 使用jquery和css点击按钮后旋转div文本

    我想使用 jquery 和 css 单击按钮后旋转 div 文本 如果用户点击Rotate Left按钮 然后文本在左侧旋转 or用户点击Rotate Right按钮然后文本在右侧旋转 Example div Happy Birthday

  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r

  • 可见性的替代方案：折叠在 IE 和 Chrome 上不起作用

    以下页面 table border 1 tr class cccc td one td tr table 仅适用于 Firefox IE 始终显示该行 而 Chrome 隐藏该行但显示其垂直空间 那么 如何仅使用 CSS 完全隐藏一行呢

  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content

  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section

  • 使组合高度等于浏览器窗口的高度

    http featuredfotografer com http featuredfotografer com Codemirror div 与 header div 结合占用的高度超过了浏览器的高度 我怎样才能使它们的总高度达到浏览器窗口

  • CSS 选择器用于选择最后两个子项，而不知道列表中有多少项

    我有一个无序列表 它有时包含 4 5 6 或 7 个项目 我想知道是否有一个 CSS 选择器来选择最后两项 我意识到 last child会给我最后一件物品 是否有 倒数第二个孩子 选择器 或者 孩子数量 2 选择器 HTML ul li

  • 仅水平 CSS 视差效果，层数大于 100vw

    如何用水平引导网站仅 CSS 视差效果 要求 仅 CSS 视差 父层必须具有宽度 高度 100vw 100vh 子层的宽度 高度必须 gt 100vw 100vh child layers must visually align 100 w

  • 如何检查元素的内容是否为空，如果是，则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT

  • 使用溢出时无法隐藏滚动条：auto

    我有这个CSS div background color red position relative height 414px overflow auto width 902px margin 0px auto 我尝试过overflow y

  • c# 如何生成锦标赛括号 HTML 表

    所以我已经被这个问题困扰了三个星期 但我一生都无法弄清楚 我想做的是使用表格获得这种输出 演示 http www esl world net masters season6 hanover sc2 playoffs rankings htt

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之

  • 通过 JavaScript 检测浏览器换行

    我需要 javascript 来检测每个浏览器包装的文本行并将其包装到 span class line 我读过一些关于测量每个单词的 y 轴的文章 但还没有看到可靠的解决方案 这是我到目前为止所拥有的 看到它Jsfiddle http js

  • html 和 body 元素的高度

    我一直在互联网上查找 min height 和 height 属性如何在 body 和 html 元素上工作 我在很多地方都看到过下面的代码 html height 100 body min height 100 上面的内容可以与其他一些

  • 现在 CSS3 供应商前缀有多必要？ [复制]

    这个问题在这里已经有答案了 我只是想知道现在在 CSS 中指定 webkit moz ms 或 o 等供应商前缀在多大程度上仍然有必要 如果我理解正确的话 opera 切换到了 webkit 所以会删除 o 对吗 IE 在 IE10 中不再

  • 指针事件：无，过滤，适用于 ie8 和任何地方，不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨

随机推荐

热门标签