使HTML页面页脚以最小高度停留在页面底部但不与页面重叠的CSS

378

我有以下页面（deadlink：）http://www.workingstorage.com/Sample.htm，它的页脚位于页面底部，我无法定位。

我想要页脚

  • 当页面短且屏幕未填满时，请粘在窗口底部，并且
  • 当内容多于内容（而不是内容重叠）时，请停留在文档末尾并照常向下移动。

CSS被继承并迷惑了我。我似乎无法正确更改它以在内容上放置最小高度或使页脚移至底部。

css  footer 
— 卡维特罗布
source
15
这是一个如此普遍的问题，真是令人惊讶。也许在CSS4中，我们会看到“制作导航栏”和“制作页脚”的实现，因为它们经常被尝试。
— 同构状态2012年
1
永远不会有CSS4（CSS3会不断增长）。我认为这将随着的实现而修复flexbox。
— Marijke Luttekes 2014年
1
— Phil
— Lalit Baghel

Answers:

345

一个简单的方法是让身体100%您的网页，用min-height的100%了。如果页脚的高度没有变化，则效果很好。

将页脚的页边距设为负数：

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
— 乔恩·温斯坦利
source
27
仅当您提前知道页脚的高度时，这才起作用。有时，页脚具有动态内容，或者由您构建框架。有任何关于可变高度页脚的想法吗？
— 2014年
@Costa 在这里检查我的答案，以获取适用于可变高度页脚的解决方案。
— Jose Rui Santos 2014年
对于动态内容，只需省略“高度”，然后页脚就会适应内容。未在所有浏览器中进行测试
— m47730 2015年
这可能需要box-sizing: border-box;身体[和#container]。
— konsolebox '16
这似乎是很多怪异的把戏，下面有一些简单而又无用的答案。
— 安德鲁·科斯特
164

我已经开发出一种非常简单的方法来将Footer粘贴在底部，但是作为大多数常用方法，您需要对其进行调整以适合Footer的高度。

查看演示

Flexbox方法：

html, body{ height:100%; margin:0; }
header{ height:50px; background:lightcyan; }
footer{ height:50px; background:PapayaWhip; }

/* Trick */
body{ 
  display:flex; 
  flex-direction:column; 
}

footer{
  margin-top:auto; 
}
 
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
展开摘要

下面的此方法通过在上放置一个::after伪元素来使用“技巧”，并将其body设置为具有正确的页脚高度，这样它将占用与页脚完全相同的空间，因此当页脚absolute位于其上方时，似乎页脚确实占据了空间并消除了其绝对定位的负面影响（例如，遍历身体的内容）

position:absolute 方法：（不允许动态页脚高度）

html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
header{ height:50px; background:lightcyan; }
footer{ background:PapayaWhip; }

/* Trick: */
body {
  position: relative;
}

body::after {
  content: '';
  display: block;
  height: 50px; /* Set same as footer's height */
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
展开摘要

表格布局方法：

html,body { height: 100%;  margin: 0; }

header {
  height: 50px;
  background: lightcyan;
}

footer {
  height: 50px;
  background: PapayaWhip;
}


/**** Trick: ****/
body {
  display: table;
  width: 100%; 
}

footer {
   display: table-row;
}
<body>
  <header>Header</header>
  <article>Content</article>
  <footer>Footer</footer>
</body>
展开摘要

— 垂直同步
source
简单优雅，更重要的是它有效。当您开始使用添加div时，其他解决方案将失败display: table display: table-row display:table-cell。但是我发现我需要添加body {margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0;}以避免滚动条。您可以通过调整来满足此要求，body:after height但是我在rem中指定了我的而不是px，所以这成为了问题。
— 史蒂夫·沃林
3
@SteveWaring-谢谢。由于答案已经很老了，因此对其进行了更新。现在我赞成使用flexbox
— vsync
1
“基本公共标记”下的CSS出现一个小错误，导致它无法正常工作（该错误在链接的“演示”中不存在，可以）。我有修复它的自由。
— sleske '18年
3
谢谢！flexbox解决方案实际上很简单，不使用hack或奇怪的固定大小或固定位置。
— 安德鲁·科斯特
1
该演示是唯一可行的演示！太好了，谢谢！
— Drakinite
51

一个非常适用于跨浏览器的非常简单的方法是：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

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;
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>
展开摘要

— 塔玛斯帕普
source
33

我用它来将页脚固定在底部，并且对我有用：

的HTML

<body>
    <div class="allButFooter">
        <!-- Your page's content goes here, including header, nav, aside, everything -->
    </div>
    <footer>
        <!-- Footer content -->
    </footer>
</body>

这是您必须在HTML中进行的唯一修改，并将其添加div到"allButFooter"类中。我使用了所有页面，这些页面太短了，我知道页脚不会停留在底部，而且页面足够长，以至于我已经知道必须滚动。我这样做是为了在页面内容是动态的情况下可以正常工作。

的CSS

.allButFooter {
    min-height: calc(100vh - 40px);
}

本"allButFooter"类有一个min-height依赖于视口的高度值（100vh指视口高度的100％）和页脚的高度，我已经知道了40px。

那就是我所做的，并且对我来说效果很好。我没有在所有浏览器中都尝试过，只是在Firefox，Chrome和Edge上尝试过，结果是我想要的。页脚会固定在底部，您无需弄乱z-index，position或任何其他属性。文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或其他任何形式。

使用响应式设计

这是我要清除的内容。使用40像素高的Footer时，此解决方案无法按我在使用的响应式设计中的预期工作Twitter-Bootstrap。我必须修改该函数减去的值：

.allButFooter {
    min-height: calc(100vh - 95px); 
}

这可能是因为Twitter-Bootstrap它具有自己的边距和填充，所以这就是我必须调整该值的原因。

我希望这对你们有用！至少，这是一个简单的解决方案，并且不需要对整个文档进行大的更改。

— 拉里厄（N. Larrieux）
source
我遇到了各种解决此问题的问题。此解决方案与我的页面配合使用，该页面使用“ display: none感谢” 来改变正文中显示的内容。也很简单。
— 史蒂夫·沃林
经过数小时的尝试解决方案后，只有两个工作正常。position: fixed; bottom: 0还有这个。此解决方案是最好的，因为页脚不会停留在底部，而是停留在可滚动页面的末尾。
— Hmerman6006
要建立您的答案，您可以通过设置来换一种方式.footer {max-height: calc(100vh+40px); position: absolute}。由于它也起作用，因此您应该只知道自己的身体大小。
— Hmerman6006 '19
28

从IE7开始，您可以简单地使用

#footer {
    position:fixed;
    bottom:0;
}

请参阅犬的支持。

— 利亚姆
source
77
当页脚以外的内容时，我不希望页脚位于底部。我希望页脚在没有足够余量的情况下停留在底部，然后在有余幕的情况下照常向下扩展。粘性页脚解决了这个问题。
— Caveatrob
@Caveatrob：我很乐意将这个重要信息编辑到您的问题中，只是为了避免造成误解（对于将来的读者，您大概已经解决了这个问题：-)）。
— sleske '18年
15

我使用的一个简单解决方案可在IE8 +上运行

在html上指定min-height：100％，这样，如果内容较少，则静止页面将占据整个视口的高度，并且页脚位于页面底部。当内容增加时，页脚随内容向下移动，并保持在底部。

JS小提琴工作演示：http : //jsfiddle.net/3L3h64qo/2/

的CSS

html{
  position:relative; 
  min-height: 100%;
}
/*Normalize html and body elements,this style is just good to have*/
html,body{
  margin:0;
  padding:0;
}
.pageContentWrapper{
  margin-bottom:100px;/* Height of footer*/
} 
.footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:100px;
    background:#ccc;
}

HTML

   <html>
    <body>
        <div class="pageContentWrapper">
            <!-- All the page content goes here-->
        </div>
        <div class="footer">
        </div>
    </body>
    </html>
— 桑耶夫
source
很好。但是只是更新.pageContentWrapper {padding-bottom：100px; / *页脚高度* /}
— Subodh Sharma
非常感谢。在Angular 7上工作
— Carlos Torres
我不想在可能时制作不必要的滚动条。
— КонстантинВан”，19年
14

然而，另一个非常简单的解决方案是：

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    display: table;
}

footer {
    background-color: grey;
    display: table-row;
    height: 0;
}

jsFiddle

诀窍是使用display:table整个文档，并display:table-row与height:0页脚。

由于页脚是唯一显示为的身体子级，因此将其显示table-row在页面底部。

— 何塞·瑞·桑托斯
source
我喜欢CSS表格，但它们会在很奇怪的地方产生问题：stackoverflow.com/questions/24898115/…–
— Costa
1
该解决方案似乎并不完全有效-Firefox忽略页脚高度0。我改用高度1px甚至1％。Edge，IE11，Chrome和移动浏览器对0感到满意
— 。– Kitet
我真的很喜欢这个解决方案。但是，当我像这样构建布局时，浏览器对子元素的计算会很麻烦。假设我们要在页面顶部有一个容器，height: 100%那么当视口比例为1/1（正方形）时，它实际上必须是其100％。当视口变宽（横向）时，高度将大于100％，如果变窄（纵向）则将小于100％。因此，高度与窗口的宽度成比例。试图用另一个包装器解决它，但这没有用。有人得到了解决方案或至少是暗示？？？
— Axel
@Axel在此版本中，我在顶部添加了一个蓝色div，高度为100％，该高度占据所有高度（减去页脚高度），而不考虑视口宽度。我认为您可能还有其他CSS混乱的地方。尝试根据我的原始jsFiddle创建最小化版本的问题
— Jose Rui Santos，
— Axel
7

要注意的一件事是移动设备，因为它们以“不寻常”的方式实现视口的想法：

http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW25

因此，使用position: fixed;（正如我在其他地方所建议的那样）通常不是要走的路。当然，这取决于您要遵循的确切行为。

我使用过的并且在台式机和移动设备上运行良好的是：

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

与

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#footer {
    position: absolute;
    bottom: 0;
}
— 本·杰克逊
source
7

一个非常简单的伸缩解决方案，不假定元素具有固定的高度或位置。

的HTML

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

的CSS

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

浏览器支持

所有主要浏览器，但IE11及以下版本除外。

确保为适当的前缀使用自动前缀。

显示代码段

— 隐孢子虫
source
像魅力一样运作！甚至对于底部超过4k的页脚棍子也是如此
— Arpan Banerjee
6

做这个

<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>

您还可以阅读有关flex的信息，所有现代浏览器均支持它

更新：我了解了flex并进行了尝试。它为我工作。希望它为您做同样的事情。这是我的实现方式。主要不是ID，而是div

body {
    margin: 0;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    display: block;
    flex: 1 0 auto;
}

在这里您可以阅读有关flex的更多信息https://css-tricks.com/snippets/css/a-guide-to-flexbox/

请记住，旧版本的IE不支持它。

— 阿斯·坦德尔（Aarth Tandel）
source
1
这是实践中最好的答案。flex-grow: 1在页脚上方使用某些东西将使页脚正确地位于底部。
— iBug
5

我只是在这里回答类似的问题：

页脚位置固定在页面底部

我在Web开发领域还很陌生，我知道这已经得到了答案，但这是我找到的最简单的解决方法，我认为这有所不同。我想要一些灵活的东西，因为我的Web应用程序的页脚具有动态高度，因此我最终使用了FlexBox和spacer。

  1. 首先设置HTML和正文的高度
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0px;
}

column在您需要添加标题，英雄或垂直对齐的任何内容的情况下，我假设我们的应用程序有这种行为。

  1. 创建间隔类
.spacer {
    flex: 1; 
}
  1. 所以稍后在您的HTML上可能会像 
<html>
  <body>
    <header> Header </header>
    Some content...
    <div class='spacer'></div>
    <footer> Footer </footer>
  </body>
</html>

您可以在这里使用它 https://codepen.io/anon/pen/xmGZQL

— 迷彩
source
5

这被称为粘性页脚。一个谷歌搜索它来了一个很大的成果。一个CSS粘滞页脚是我已经成功地使用了一个。但是还有更多。

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
展开摘要

此代码的来源

— 保罗·贝尔甘蒂诺
source
3

我的jquery方法，如果页面内容小于窗口高度，则此方法将页脚置于页面底部，否则，仅将页脚置于内容之后：

同样，在其他代码之前将代码保留在自己的外壳中会减少重新定位页脚所需的时间。

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
— 山姆·琼斯
source
3

我一直在研究这个问题。我已经看到了很多解决方案，每个解决方案都有问题，通常涉及一些不可思议的数字。

因此，使用来自各种来源的最佳实践，我想到了以下解决方案：

http://jsfiddle.net/vfSM3/248/

我要在此处具体实现的目的是使主要内容在绿色区域内的页脚和页眉之间滚动。

这是一个简单的CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
header {
    height: 4em;
    background-color: red;
    position: relative;
    z-index: 1;
}
.content {
    background: white;
    position: absolute;
    top: 5em;
    bottom: 5em;
    overflow: auto;
}
.contentinner {
}
.container {
    height: 100%;
    margin: -4em 0 -2em 0;
    background: green;
    position: relative;
    overflow: auto;
}
footer {
     height: 2em;
     position: relative;
     z-index: 1;
     background-color: yellow;
}
— 胡赛特
source
3
我讨厌这样设计的网站。为什么要限制我可以同时阅读的文本量？我不需要一直看到页眉和页脚，我知道在需要时可以在哪里找到它们。
— 塔米尔
1
@Tarmil看看numerics.info。您现在看到什么时候有用吗？
— 侯赛特2014年
3

这就是我解决相同问题的方式

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}
<div class="demo">

  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute; </code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
展开摘要

— 内莫斯
source
2

只需自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}
 <div class="footer">
   Footer is always bootom
 </div>
— 粗鲁的
source
不工作 即使我们的页面很大，它也始终会坚持到底。它无法滚动所有页面，而只能停留在底部。
— fWd82
不起作用 页脚位于内容之上。
— indolentdeveloper
1

这是我的两分钱。与其他解决方案相比，不需要添加额外的容器。因此，该解决方案更加优雅。在代码示例下面，我将解释其工作原理。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>test</title>
        <style>

            html
            {
                height:100%;
            }

            body
            {
                min-height:100%;
                padding:0; /*not needed, but otherwise header and footer tags have padding and margin*/
                margin:0; /*see above comment*/
            }

            body
            {
                position:relative;
                padding-bottom:60px; /* Same height as the footer. */           
            }

            footer
            {
                position:absolute;
                bottom:0px;
                height: 60px;

                background-color: red;
            }

        </style>
    </head>
    <body>
        <header>header</header>


        <footer>footer</footer>
    </body>
</html>

因此，我们要做的第一件事就是使最大的容器（html）100％。html页面与页面本身一样大。接下来，我们设置主体高度，它可以大于html标记的100％，但它至少应该一样大，因此我们将最小高度设为100％。

我们还使身体相对。相对表示可以将块元素从其原始位置相对移动。我们在这里不使用它。因为亲戚有第二种用法。任何绝对元素对根（html）或第一个相对父代/祖父母都是绝对的。那就是我们想要的，我们希望页脚相对于身体（即底部）是绝对的。

最后一步是将页脚设置为absolute和bottom：0，将其移动到相对的第一个父/祖父母（课程的主体）的底部。

现在，我们仍然要解决一个问题，当我们填满整个页面时，内容将放在页脚下方。为什么？好吧，因为页脚不再是“ html流”之内，因为它是绝对的。那么我们该如何解决呢？我们将在身体底部添加padding-bottom。这样可以确保身体实际上比其容纳的物体更大。

我希望我对你们说得很清楚。

— 大卫
source
1

使用jQuery动态一线

我遇到的所有CSS方法都太死板了。此外，fixed如果这不是设计的一部分，则不能将页脚设置为。

经过测试：

  • 铬：60
  • FF：54
  • IE：11

假设这种布局：

<html>

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

</html>

使用以下jQuery函数：

$('#content').css("min-height", $(window).height() - $("#footer").height() + "px");

是什么一样被设置min-height为#content在窗口高度 - 页脚的高度，什么都可能是当时的。

由于我们使用min-height，所以如果#contentheight超过窗口的高度，则该函数会正常降低性能，并且由于不需要它不会产生任何影响。

实际观看：

$("#fix").click(function() {
  $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
    <button id="fix">Fix it!</button>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
展开摘要

JsFiddle上的相同代码段

奖金：

我们可以更进一步，使此功能适应动态查看器高度调整，如下所示：

$(window).resize(function() {
    $('#content').css("min-height", $(window).height() - $("#footer").height() + "px");
  }).resize();
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #111;
}

body {
  text-align: center;
  background: #444
}

#content {
  background: #999;
}

#footer {
  background: #777;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<body>
  <div id="content">
    <p>Very short content</p>
  </div>
  <div id="footer">Mr. Footer</div>
</body>

</html>
展开摘要

— 我哈兹·科德
source
0

只需将html，body和除行脚以外的其他行设置为100％。例如

<body>
<header></header>
<content></content>
<footer></footer>

CSS变成 

html, body, header, content{
height:100%;
}
— Olatunde G.
source
0 
<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>


#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}
— 圣杰西
source
0

那个怎么样：

<div style="min-height: 100vh;"> 
 content
</div>

<footer>
 copyright blah blah
</footer>
— 新手
source
尽管此代码可以回答问题，但提供有关此代码为何和/或如何回答问题的其他上下文，可以改善其长期价值。
— β.εηοιτ.βε
-1

我已经在很多项目中使用过，从来没有遇到任何问题:)

供您参考，代码摘录 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	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 -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
展开摘要

— Santosh Khalse
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.