html - 在我的 wordpress 中强制页脚到页面底部以获取短页面-6ren

html - 在我的 wordpress 中强制页脚到页面底部以获取短页面

转载作者：行者123 更新时间：2023-11-28 12:37:20

25

4

我有一个网站，我仍在使用和编辑它，但是我对尝试将页脚贴在屏幕底部有点迷茫。

我尝试了 ryanfait 选项 ( http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ )，但我看不出如何让它与我当前的主题一起工作。

然后我尝试了一种使用绝对位置等的不同方法，但它把页脚放在我的长页面的页面中间，太明显了，无法工作。

我当前的站点是:http://goo.gl/PO3OYo您可以在首页上看到我所说的页脚不正确的意思...

我的网站 html 基本上是这样的:

<body>
  <div id="wrap">
    <div id="header"></div
    <div id="nav"></div>
    <div id="inner"></div>
    <div id="footer" class="footer"></div>
 </div>

CSS 是

* { 
    margin: 0;
}

html {
    margin: 0;
    padding: 0;
    height:100%;
}

body {
    background: #000000 url(images/bg.jpg) top center no-repeat;
    color: #444444;
    font-size: 12px;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
    margin: 0 auto 0;
    padding: 0;
    line-height: 21px;
    height:100%;
}

#wrap {
    height:auto !important;
    margin:0 auto;
    min-height:100%;
    padding:0;
    position: relative; */ I tried this but it breaks long pages */
}

#inner {
    background: #FFF;
    width: 900px;
    margin: 0 auto 0;
    padding: 30px;
    overflow: hidden;
}

#footer {
    background: #161616;
    color: #666666;
    margin: 0 auto 0;
    padding: 20px, 0, 0, 0;
    clear: both; 
    overflow: hidden;
    border-top: 1px solid #222222;
    height: 40px;
    bottom: 0;
    left: 0;
    width: 100%;
    position: absolute; */ I tried this but it breaks long pages */
}

你有什么想法我可以在没有 position: absolute 的情况下让它工作吗？

最佳答案

伙计，你离得太近了!

确保您遵循相同的结构:

<body>
    <div id="wrap">
      <div id="header">fdsf</div>
        <div id="nav">ffd</div>
        <div id="inner">
          content here...
        </div>
        <div class="push"></div>            
    </div>
    <div id="footer" class="footer">footer</div>
</body>

然后来自 ryan fait 的

#wrap {
min-height: 100%;
  height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
  height: 100%;
  margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}

.footer, .push {
  height: 155px; /* .push must be the same height as .footer */
}

#footer {
  background: #161616;
  color: #666666;
  margin: 0 auto 0;
  padding: 20px, 0, 0, 0;
  clear: both; 
  overflow: hidden;
  border-top: 1px solid #222222;
  width: 100%;
}

例子: http://codepen.io/EightArmsHQ/pen/YPymWV

我真的建议在 Codepen 中处理我的代码，只是为了掌握它。我在我做过的每一个页脚中都添加了粘性页脚，而且它仍然有时会让我变得更好，所以请坚持下去。也总会有上述情况完全不奏效的情况...

关于html - 在我的 wordpress 中强制页脚到页面底部以获取短页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27300448/

25

4

0

文章推荐： javascript - 如果单击导航栏 ID，则 jQuery Mobile 发出警报

文章推荐： javascript - 点击 radio 没用。为什么？

文章推荐： javascript - 如何在数组中创建重复的对象

文章推荐： CSS3 翻转在 Internet Explorer 中不起作用

.htaccess - 强制 https，强制到子文件夹，强制 www，不要破坏站点
我一直很难编辑我的 .htaccess 文件来一起做这三件事。我已经能够分别获得每个部分，但我只是不明白逻辑流程如何使它们全部工作。这是我能够使用 bluehost support 上的演示进行整合
vba - 强制"is"以保存并另存为无宏工作簿
我制作的宏将模板工作簿保存为两个单独的文件。每个测试保存一个(位置 1、2、3 或 4)，然后在另一个宏中使用每个测试的数据。第二个是保留用于备份的原始数据文件。现在的问题是每次我在每个位置运行测试并
types - 包括模块、强制
我正在写一篇关于如何使用 OCaml 的模块系统而不是 Java 的 OO 系统(一个有趣的视角)的博客文章。我遇到了一些我不理解的关于强制的事情。下面是一个基本模块和两个包含它的模块: module
c - 强制 if 语句只执行一次
我有一段将被执行多次(5,000+)的代码，以及一个仅在第一次为真的 if 语句。我曾想过使用“FIRST”变量并每次都进行比较，但每次都检查它似乎是一种浪费，即使我知道它不需要。 bool FIRS
强制 P4CONFIG 未设置？
首先，我是 Perforce 的新手，我主要通过其文档进行学习。因此，我们即将从 CVS 迁移到 Perforce，我最近学到了一个避免更改每个工作区的 P4CLIENT 的好方法，即在工作区根目录
java - 强制 FileNotFoundException
我正在为一段代码编写测试，其中包含我试图涵盖的 IOException 捕获。 try/catch 看起来像这样: try { oos = new ObjectOutputStream(new
javascript - 强制 $.each() 循环等待动画完成后再继续
我正在尝试在新闻项目滚动之间添加延迟。我知道 $.each() 通过不等待动画完成来完成其工作，但我想知道如何制作它，以便一次向上滚动一个项目并等到最后一个动画完成后再继续在循环中。 $(functi
c# - 强制/要求方法的排序列表参数
假设已经编写了一个方法，需要一个排序列表作为其输入之一。当然这将在代码中进行注释和记录，param 将被命名为“sortedList”，但如果有人忘记，则会出现错误。有没有办法强制输入必须排序？我正
Apache 强制 SSL
我正在尝试将传入请求重定向到 https://www.domain.com/和所有 https://www.domain.com/ {所有页面}并且没有什么麻烦。我试过的方法: 添加此行:Redire
python - 强制 raw_input
我将如何实现以下内容: title_selection = raw_input("Please type in the number of your title and press Enter.\n%
javascript - 在浏览器中自动完成 ="off"强制
我有一个登录表单，我需要强制关闭自动完成功能。我试过了 jquery: $('#login').attr("autocomplete", "off"); HTML: Javascript:docume
Git 强制 merge
我想知道我应该怎么做才能强制从 dev 分支 merge 到我的 master 分支？使用“git merge dev”会导致很多冲突。但是，我不想单独处理它们。相反，我只是想使用我的 dev 分支中
c# - 强制 Nuget 包使用特定版本的子依赖项？
当安装 Hl7.Fhir.DSTU2 和 Hl7.Fhir.R4 这两个 Nuget 包时，我们得到如下信息: DSTU2 包似乎在使用 Hl7.Fhir.Support.Poco 版本 3.4.0
reactjs - 强制 react 功能组件触发重新渲染
我正在尝试让一个功能组件在 testFn 执行时强制重新渲染。我想使用状态来做到这一点(如果有更好的方法请说出来)，这似乎成功地强制重新渲染但只有两次，然后什么都没有。我构建了一个简单的演示来模拟这
g++ - 强制 g++ 为未使用的函数生成代码
默认情况下，g++ 似乎会省略未使用的类内定义方法的代码。示例 from my previous question : struct Foo { void bar() {} void baz(
html - 强制 div 高度以适应透视内容
我正在尝试使用 here 中介绍的技术使我的网站背景以比内容慢的速度滚动。我不希望背景固定，只希望更慢。这是 HTML 的样子: .parallax { perspective: 1px;
dart - 强制 ListView 缩小以包含子项
我能找到的最相似的问题是 'how to create a row of scrollable text boxes or widgets in flutter inside a ListView?'
javascript - 强制(修复)导入完全在一行中
我有以下 eslint 配置: "object-curly-newline": ["error", { "ImportDeclaration": "never",
tinymce - 强制 TinyMCE 去除数据属性
我正在使用 TinyMCE 插件并将 valid_elements 选项设置为: "a[href|target:_blank],strong/b,em/i,br,p,ul,ol,li" 即使没有列出数
强制 : wanted to Multiline description
您好，我想使用以下命令放置多行描述 p4 --field Description="MY CLN Header \\n my CLN complete description in two -thre

首页

博学

6Ren·AI

商城

html - 在我的 wordpress 中强制页脚到页面底部以获取短页面