粘性页脚 CSS

2024-01-17

我有一个非常基本的网站(页眉、内容、页脚没有侧边栏或任何东西),问题是内容区域与页脚重叠。我已经尝试了所有粘性页脚修复(即 csstricks、ryanfait.com 和我在 google 上找到的其他一些以及这里的一些,但它们都不起作用

像往常一样,任何帮助都会受到赞赏

    <body>
     <div class="wrapper">


            <div id="header">
            </div>

            <div id="content">      
            </div>

            <div id="push">
            </div>

     </div>

     <div id="footer">
     </div>

</body>



    * {
margin: 0;
}

html, body {
height: 100%;
}



#header{
    background-image:url("Images/nav.jpg");
    width:100%;
    height:64px;
}

#content{
    background:#ffffff;
    height:592px;
    width:798px;
    position:absolute;
    top:80px;
    left:20%;
    z-index:3;
    -moz-box-shadow: 0px 0px 8px #000000; /* FF3.5+ */
    -webkit-box-shadow: 0px 0px 8px #000000; /* Saf3.0+, Chrome */
    box-shadow: 0px 0px 8px #000000; /* Opera 10.5, IE9, Chrome 10+ */
}

#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -129px;
}

#footer, #push {
height: 129px;
}

#footer{
    background-color:#292929;
    width:100%;
}

为什么你的内容是绝对定位的?它似乎不需要,并且会导致您遇到的问题。删除它并制作页脚:

#footer {
 position: fixed;
 bottom: 0;
 height: 80px; 
}

http://jsfiddle.net/JyQxW/ http://jsfiddle.net/JyQxW/

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

粘性页脚 CSS 的相关文章

  • 如何在没有 AM/PM 的情况下使用 datetime-local?

    我想使用以下代码
  • 如何在jqplot中显示饼图之外的标签?

    Jqplot 有如下图表 jqplot 图表 http www jqplot com tests pie donut charts php 我的问题是如何在 a 之外显示标签jqplot chart像下面这样high chart 高图表可以
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 动态表单标签宽度的 CSS

    我目前正在重构我们的表单控制器之一 以便我们可以将其用于面向公众的网站 目前它正在为表单生成表格布局 但我正在尝试使用 CSS 表单来完成它 我正在尝试重现看起来像这样的东西http www stylephreak com uploads
  • CSS:水平滚动时背景不存在

    好的 我的背景设置如下 HTML div div CONTENT HERE div div CSS container background url image gif content width 800px margin auto 因此
  • 如何通过单击图像预览上的“x”从文件输入中删除图像?

    我目前有一个文件输入 一旦用户上传图像 就会显示图像预览 在图像预览上 有一个 x 可以从列表中删除图像预览 单击此 x 后 有什么方法可以从输入中的文件集中删除图像吗
  • 如何倾斜 div 并保持背景图像不倾斜

    我已经花了几个小时了 所以希望有人能提供帮助 我有一个网站 其中大部分 div 都是倾斜的 大多数 div 都包含背景图像 现在我已经让 div 倾斜了 内容完美地位于其中 唯一的问题是背景图像 它与父级一起倾斜 我用谷歌搜索了很多 但找不
  • 调整文本区域大小

    我需要使用文本区域来显示一些文本 问题是 如果我放置 4 5 行文本 就会出现滚动条 如何使用 CSS HTML 使文本区域与其内容一样大 没有滚动条 文本区域不需要动态更改其大小 我仅使用它来显示文本 我也可以使用禁用的文本区域 我希望文
  • VBA / HTML / jQuery 选择自动完成 - 在列表中选择

    我正在尝试使用 Excel 中的 VBA 在网站的列表中选择一个值 这不是一个 正常列表 该网站使用 jQuery 选择自动完成 如下所示 example http davidwalsh name demo jquery chosen ph
  • 动画进度元素值

    我有一个progress元素 该元素如下所示 div class container div div div
  • 如何更改 Bootstrap 3 div 列顺序

    正在做我的第一个响应式设计 在 Bootstrap 3 中可能会出现类似的情况 在 lg 上更改此设置 a b c sm 上的这个 a c b 您可以使用两个 div 一个用于第一类型的布置 另一个用于第二类型的布置 第一个仅在 lg 中显
  • W3C 验证器:“握手警报:unrecognized_name”

    我正在尝试验证我的网站W3C Nu Html 检查器 https validator w3 org nu doc https 3A 2F 2Fwww healthdrop in 2F但我遇到了以下错误 不知道为什么 IO 错误 握手警报 u
  • Jquery 中的动态滚动位置

    请帮助我解决以下情况 我有 3 个页面 当滚动到达第二页时 用户滚动页面 它必须找到特定的 ID 然后触发一个函数 一旦第三页开始 另一个函数就会触发 根据要求我不应该使用任何插件
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • 使用 JS 合并具有相同值的相邻 HTML 表格单元格

    我已经为此苦苦挣扎了一段时间 我有一个根据一些 JSON 数据自动生成的表 该数据可能会有所不同 我想合并第一列中具有相同值的相邻单元格 例如此表中的 鱼 和 鸟 table tr td fish td td salmon td tr tr
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 覆盖并重置 CSS 样式:auto 或 none 不起作用

    我想覆盖为所有表定义的以下 CSS 样式 table font size 12px width 100 min width 400px display inline table 我有一个特定的表 其类名为 other 最后的餐桌装饰应该是这
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • 三级十进制有序列表 CSS

    我有一个 html 中的三级有序列表 我想为其提供如下样式 1 Item 1 1 1 Item 2 1 1 1 Item 3 下一个 plunker 中有一个 html 示例 http plnkr co edit DqhZ5pJILTUHG
  • 带显示块的SPAN

    和默认有什么区别 div 元素和默认值 span 元素与display block HTML 元素的有效性和语义存在差异 否则它们是相同的 div and span两者都被定义为通用容器 在 HTML 方面没有更深层次的含义 一个默认为块显

随机推荐

  • 如何用权重标记图边

    Warning 当 Mathematica v 8 0 是最酷的孩子时 我发布了这个问题 该bug已于9 0 1版本解决 The help for EdgeLabels http reference wolfram com mathemat
  • Spark 中函数返回空列表

    下面是获取压缩文件中文件名列表的代码 def getListOfFilesInRepo zipFileRDD RDD String PortableDataStream List String val zipInputStream zipF
  • 如何从 MVC3 中的控制器调用 javascript 函数

    我环顾四周 找不到解决方案 因此我发现自己在这里 根据我所读到的内容 我可以使用 RegisterClientScript 或 RegisterClientScriptBlock 在 ASP NET Web 表单中执行此操作 我在任何 MV
  • redis HLL 误报太多

    Hyperlog日志是一种概率算法 根据 redis HLL 文档 我们可能会得到 0 81 的错误 但我得到的错误是 17 20 我认为有问题 这是我的简单 perl 测试脚本 有没有什么错误 usr bin perl w use Red
  • 如何检测git中的分支点?

    我正在尝试确定分支中的第一次提交 我读过其他各种 SO 帖子 包括用 Git 寻找分支点 https stackoverflow com questions 1527234 finding a branch point with git 但
  • 在手机上看到的带有 mathjax 的博客

    我正在使用 mathjax我的博客点博客 http ochopatas blogspot mx 在电脑上看效果很好 但在手机上看公式就不会变形 我找到了这个其他博客点博客 http imflaud blogspot mx 2016 07 i
  • AngularJS 与 .NET MVC 捆绑缩小错误

    我一直在 NET MVC 网站内开发一个大型 AngularJS 应用程序 我已经花了很长时间没有测试它是否会使用捆绑优化功能成功缩小 BundleTable EnableOptimizations True 当然 它失败了 我一直在玩捆绑
  • 实施“make check”或“make test”

    如何用Make实现一个简单的回归测试框架 我正在使用 GNU Make 如果这很重要的话 我当前的 makefile 看起来像这样 为简单起见进行了编辑 OBJS jscheme o utility o model o read o eva
  • Heroku + Github 部署策略

    我正在开发一个 Web 应用程序 在 Github 上托管源代码并在 Heroku 上运行该应用程序 一切工作正常 但我有一个问题 我无法解决 在部署代码之前 我运行一些脚本来优化代码 缩小 连接文件等 heroku 应用程序仅使用该应用程
  • E/libprocessgroup:set_timerslack_ns 写入失败:不允许操作?

    当我运行 Android 应用程序时 我在 Logcat 中遇到了这个问题 有谁知道这个问题以及如何解决它 该应用程序不会崩溃 但是当我每次尝试在 Google 地图的自动完成搜索栏中输入内容时 它都会关闭该活动 并返回上一个 在谷歌地图上
  • 以静默方式安装 Dot net 4.5 作为依赖项

    我有一个静默安装的设置 但它依赖于 dot net Framework 4 5 那么我该如何创建 也可以静默安装依赖项的安装程序 Setup is created in Install Shield and it is a wpf appl
  • 多边形算法中的点有时会给出错误的结果[关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我在 StackOverflow 上看到了我在 PHP 代码中实现的 多边形中的点 光线跟踪算法 大多数时候 它工作得很
  • 尝试在 Laravel 中删除一行时出现错误“调用未定义的方法 stdClass::delete()”

    我从数据库和本地存储中删除图像的方法 public function destroy id image DB table images gt where id id gt first print r image return end Fil
  • 如何让 cimport 在 Cython 中工作?

    我的目录结构如下 我的模块 init py A init py a pyx B init py b pyx 在 b pyx 中 我想从 A a 导入函数 常规的 python 导入可以工作 但 cimport 总是失败 另外 我分别编译 A
  • 如何从 Azure 移动服务返回异常

    我制作了一个在本地运行良好的 Azure 移动服务 然后 我将 Azure 移动服务发布到云 网站显示它当前正在运行 然后我做了一个GET Request到我发布的网站 它返回以下内容 状态 500 内部服务器错误 500 内部服务器错误
  • Typeorm 打字稿存储库 findone - 类型参数不可分配给“FindOneOptions”类型的参数

    这是我的配置文件 import Column Entity PrimaryGeneratedColumn from typeorm Entity name guild configurations export class GuildCon
  • PostgreSQL:不区分大小写的字符串比较

    PostgreSQL 有一个简单的忽略大小写比较吗 我想更换 SELECT id user name FROM users WHERE lower email IN lower email protected cdn cgi l email
  • 如何将 MVC 视图返回到 $.Ajax JSON POST

    我正在将 Ajax POST 发送到带有参数的 MVC 控制器函数 并成功返回 JasonResult 我需要做的是返回当前视图 就好像它不是 JSON 请求并且我正在返回视图数据 Viewdata已更新 页面需要重新绘制 简而言之 我希望
  • Android - 是否有可能制作无限画布?

    目前我正在开发允许用户绘图的应用程序 简单的想 只需扩展 Canvas 类 大部分事情就完成了 这是我最初的想法和想法 但由于画布相当小 因为这只是用户在屏幕上看到的内容 因此没有太多可以绘制的空间 浏览我发现的文档translate 允许
  • 粘性页脚 CSS

    我有一个非常基本的网站 页眉 内容 页脚没有侧边栏或任何东西 问题是内容区域与页脚重叠 我已经尝试了所有粘性页脚修复 即 csstricks ryanfait com 和我在 google 上找到的其他一些以及这里的一些 但它们都不起作用