个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
对于始终位于页面底部但不固定(或与内容重叠)的页脚，有许多良好且经过充分测试的方法。这是一个对我有用的:http://ryanfait.com/sticky-footer/
简而言之，它的工作原理如下:
HTML:
<html><body>
<div id="wrapper>SOME CONTENT</div><footer></footer>
</body></html>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -4em;
}
footer {
height: 4em;
}
诀窍是 #wrapper 被迫使用 100% 的可用高度，但 margin bottom 为页脚留出了一些空间(负边距正好是页脚的大小)。
在构建单页应用程序时，某些 javascripts 框架(如 Ember.js)会向我们的文档结构添加额外的 div(例如，用于处理事件)。这会在我们的原始文档周围创建一个额外的包装器，它可能看起来像这样:
<html><body>
<div class="framework-container">
<div id="wrapper>SOME CONTENT</div><footer></footer>
</div>
</body></html>
这个额外的 div 破坏了我们的 CSS 设置。为了改善这种情况，我们想说 framework-container 的行为应该与 body 完全一样，因此我们可能会尝试添加:
.framework-container {
position: relative;
height: 100%;
min-height: 100%;
}
它几乎可以工作:如果内容小于页面高度。否则页脚和页面底部之间会有明显的距离 - 我们不能接受。
有人知道这个问题的纯 CSS 解决方案吗？
最佳答案
我不确定你说包装器是否有效，但你可以告诉 Ember 将应用程序插入到特定元素中，它不会在该元素之外(上方)插入任何元素。
设置根元素
App = Em.Application.create({
rootElement: '#body'
});
HTML
<div id="container">
<div id="header">I'm a header</div>
<div id="body"></div>
<div id="footer">I'm a footer</div>
</div>
CSS
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
http://emberjs.jsbin.com/OPaguRU/1/edit
我完全从中提取了一些:http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
关于html - 带有附加包装器 div 的 CSS "Sticky Footer"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19893302/
24
4
0
我有一个父容器。父容器有 2 个带有粘性页眉和页脚的子容器。问题在于，当用户滚动并到达页脚区域时，粘性页眉的位置会发生变化，即它会与其他可滚动内容一起上升。我为演示创建了一个 fiddle 。 htt
我有一个应用文件，其中包含我自己的自定义应用栏和不同的页面组件: const styles = theme => ({ appBar: { width:'100%', },
这是我的 jsFiddle带有完整的代码示例。 我正在尝试实现 sticky footer .如您所见，我的登录表单非常简短。尽管如此，页脚应该一直固定到页面底部。我试过: .footer {
我有一个这样的 div : HTML Title
如何让我的粘性导航菜单在粘到屏幕顶部后专门使用 GetUIKit 框架更改背景颜色(即蓝色到白色)？ 这是我的代码: wo
我被困在这个问题上有一段时间了，我想我会分享这个position: sticky + flexbox gotcha: 我的粘性 div 工作正常，直到我将我的 View 切换到一个 flex 盒容器，
如果你打开这个 Fiddle https://jsfiddle.net/17uwnsq6/4/在 Safari(12.1.2，但应该适用于所有最新版本)中并开始向下滚动白色可滚动区域，起初粘性“标题”
我在我的网页上使用 jquery.sticky.js。 Div 工作正常，即粘性，但我需要在页脚之前停止 div。 我使用下面的代码来粘性 DIV jQuery(文档).ready(function(
使用 position:sticky 将此代码添加到我的粘性元素 var $sticky = $('.grid-container .sticky'), $stickyTo = $('.grid-
我正在努力实现一些我不确定是否可能实现的事情。请注意，我正在寻找纯 CSS 解决方案，我知道我可以用 JS 解决这个问题，但我不想这样做。 考虑以下笔: https://codepen.io/fchr
我向我的网上商店添加了一个粘性 header ，它适用于 FF、Chrome、Edge。 在 Safari(Windows 10)中执行 JavaScript， header 被固定和转换 - 但不可
我遇到过这两个用于 node js 的粘性 session 库 https://github.com/indutny/sticky-session https://github.com/wzrdtal
WordPress - 元素。尝试优化代码时出了点问题，现在我在页面的第一部分上方有一个巨大的空白空间，我正试图摆脱它。我是新手，正在使用 Elementor，所以我只能使用自定义 CSS。问题出现在
我怎样才能让 Foundation 的粘性元素只粘在小断点上？ data-sticky-on="small"适用于小及以上 最佳答案 对于那些有兴趣的人。我在使用 sass 时找到了这个解决方案。 /
我想创建网格布局，我想搁置以坚持 top: 0并填充所有剩余高度，例如100% 的高度，当我向下滚动时，我需要将旁边的高度更改为 100% 减去页脚高度。没有JS可以做到吗？ * { paddin
我正在为一个 friend 制作一个网站，我想将导航栏设为粘性。这是一个例子:http://www.w3schools.com/html/default.asp .我想要一张图片，其中标题在示例中。
我们的页面上有一个粘性侧面板，使用以下非常简单的 CSS 实现: position: fixed; top:62px; bottom:10px; top 和 bottom 属性创建所需的边距。 问题在
我正在使用 几乎 纯 css，(仅在 css 中执行此操作 不是 要求)背景图像和相邻的选择器用于呈现独特的人类可读的页面当用户将鼠标悬停在水平堆叠的图像上时(在页面右侧，每个图像都使用顺序后缀的类名
如果您不知道 position:sticky 是什么，请观看这个 20 秒长的视频:https://www.youtube.com/watch?v=jA67eda5i-A . 这个 CSS 功能在
我已将一个元素设置为粘性，但我没有定义元素应保持粘性的区域。当前区域不是我选择的，而是在我应用 position:sticky 时自动定义的。显然，我想完全控制我的粘性元素用作事件区域的空间，并且我想
我是一名优秀的程序员,十分优秀！