blocks|key|1448572|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1448573|#footer+{
++++position:absolute;
++++bottom:0px;
}|code-block|syntax|javascript|1448574|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>#footer {
    position:absolute;
    bottom:0px;
}
</code></pre>


blocks|key|3764071|text|+++Try+this+one+dont+forget+to+add++`position:relative`+to+it's+parent+div+or+element+
+++#parent-div{
++++++++++position:relative;
++++}

++++#footer+{
++++++++position:absolute;
++++++++bottom:0px;
++++}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3764072|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>   Try this one dont forget to add  `position:relative` to it's parent div or element 
   #parent-div{
          position:relative;
    }

    #footer {
        position:absolute;
        bottom:0px;
    }
</code></pre>


blocks|key|1448608|text|固定页脚上方分割的最小高度。我想它会起作用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1448609|否则，将footer的position属性设置为absolute，将bottom设置为0。试试这个，希望它能行得通。|1448610|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>fix the min-height of the division above footer. I think it will work.</p>

<p>Otherwise set the position property of footer to absolute and bottom to 0. try this hope it will work.</p>


blocks|key|5232414|text|position:absolute;
bottom:0;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|5232415|会让你的页脚留在最下面。但您必须相应地对其余内容进行一些更改。|unstyled|5232416|看一下这个例子：|5232417|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>position:absolute;
bottom:0;
</code></pre>

<p>Will make you footer stay to the bottom. But you have to make some changes to the rest of your content accordingly.</p>

<p>Have a look at this example: <a href="http://jsfiddle.net/3KZh3/5/" rel="nofollow"><strong>Here</strong></a></p>


blocks|key|5232437|text|http://jsfiddle.net/sheriffderek/varaH/1/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5232438|我也想弄清楚这件事的真相。这是我的基本示例。在响应式站点中会变得更加复杂。但我保留这个是为了记住这是可能的..。希望这能有所帮助？|5232439|entityMap|0|LINK|mutability|MUTABLE|url^0|0|15|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@$A|N|B|O|1|P]]|C|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|4]]]]

<p><a href="http://jsfiddle.net/sheriffderek/varaH/1/" rel="nofollow">http://jsfiddle.net/sheriffderek/varaH/1/</a></p>

<p>I'm also trying to get to the bottom of this.  this is my basic example.  It gets more complicated in responsive sites... but i keep this to remember that it is possible... hopefully this will help ?</p>


blocks|key|1448697|text|我认为您需要使用position:fixed尝试通过在主体中添加大量虚拟数据来进行实验，以便滚动页面。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1448698|<!DOCTYPE+HTML>
<html+lang="en-US">
<head>
++++<meta+charset="UTF-8">
++++<title>Some+Page</title>
++++<style+type="text/css">
++++++++#footer{
++++++++++++position:fixed;
++++++++++++bottom:0px;
++++++++++++background-color:+black;
++++++++++++color:white;
++++++++}
++++</style>
</head>
<body>
++++<h1>Some+Page</h1>
++++<p>Lorem+ipsum+dolor+sit+amet,+consectetur+adipisicing+elit,+sed+do+eiusmod
++++tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,
++++quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo
++++consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse
++++cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non
++++proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.</p>
++++<div+id="footer">
++++++++&copy;+company+name
++++</div>
</body>
</html>|code-block|syntax|javascript|1448699|我希望这能帮上忙|1448700|entityMap^0|8|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>I think you need to use <code>position:fixed</code>
Try to experiment by adding lots of dummy data in the body so that you scroll the page. </p>

<pre><code>&lt;!DOCTYPE HTML&gt;
&lt;html lang="en-US"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Some Page&lt;/title&gt;
    &lt;style type="text/css"&gt;
        #footer{
            position:fixed;
            bottom:0px;
            background-color: black;
            color:white;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Some Page&lt;/h1&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
    &lt;div id="footer"&gt;
        &amp;copy; company name
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>I hope thishelps</p>


<p>I have been having trouble with getting a footer to stay at the bottom of the browser on a template I have been using. If there is a lot of content to 'push' the footer down it looks ok on firefox, but I can see in chrome it is in 'mid air' above the bottom of the page and looks very bad.</p>

<p>Something must be wrong with it but even after I've looked at many sticky footer tutorials not one seems to fix the issue, it just 'breaks' the footer, usually making it disjointed. I am still a beginner at html/php so would greatly appreciate any help, I'm desperate to solve the problem.</p>

<p>I have pasted the style.css and the sample page on jsfiddle: <a href="http://jsfiddle.net/3KZh3/4/" rel="nofollow">http://jsfiddle.net/3KZh3/4/</a></p>


Tried using many sticky footer tutorials, cannot fix footer

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在我一直在使用的一个模板上，我一直无法让页脚停留在浏览器的底部。如果有很多内容需要向下‘推’页脚，它在火狐上看起来还可以，但我可以在chrome中看到它在页面底部上方的‘半空’中，看起来非常糟糕。它肯定出了什么问题，但即使在我看了很多粘性的页脚教程之后，似乎没有一个能解决这个问题，它只是“破坏”了页脚，通常会使它脱节。...

问尝试使用许多粘性页脚教程，无法修复页脚
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尝试使用许多粘性页脚教程，无法修复页脚EN