CSS使HTML页脚保持在最低高度的页面底部。

时间：2022-11-20 11:05:30

I had the following page (deadlink: http://www.workingstorage.com/Sample.htm ) that has a footer that I can't make sit at the bottom of the page.

我有以下页面(死链接:http://www.workingstorage.com/Sample.htm)，它有一个页脚，我不能坐在页面底部。

The CSS is inherited and befuddles me; I can't seem to change it properly to put a minimum height on the content or make the footer go to the bottom.

CSS是继承的，让我困惑;我似乎不能正确地改变它，在内容上设置一个最小的高度，或者让页脚到底部。

19 个解决方案

#1

286  

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

一种简单的方法就是将你的页面100%的设置为100%。如果您的页脚的高度没有变化，那么这个操作就很好。

Give the footer a negative margin-top:

给页脚一个负边距:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

#2

27  

A very simple approach which works great cross browser is this:

一个非常简单的方法在跨浏览器中很有效，那就是:

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

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

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="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;
}

#3

25  

From IE7 onwards you can simply use

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

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

See caniuse for support.

看到caniuse寻求支持。

#4

25  

I've developed quite an easy method to stick the Footer at the bottom, but as most common methods, you will need to tweak it to fit your Footer's height.

我开发了一种非常简单的方法来将页脚粘在底部，但是作为最常见的方法，您需要调整它以适应页脚的高度。

VIEW DEMO

This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)

下面这个方法使用“诡计”通过将一个::身体上伪元素后,并设置它的页脚的高度,所以它会占据相同的空间页脚,所以绝对定位在页脚时,它会像页脚是占用空间和消除它的负面影响是绝对定位(例如,在身体的内容)

HTML (basic common markup)

html, body{ height:100%; margin:0; }
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>

Below methods allow dynamic footer heights:

Using 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>

Using Table-layout

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>

#5

13  

A simple solution that i use, works from IE8+

我使用的一个简单的解决方案是IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

在html上设置最小高度:100%，这样如果内容减少，页面仍然保持完整的视图端口高度，页脚位于页面底部。当内容增加时，页脚随着内容向下移动，并一直粘在底部。

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

小提琴工作演示: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>

#6

13  

I've used this to stick my footer to the bottom and it worked for me:

我用这个把脚注贴在底部，它对我有用:

HTML

HTML

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

That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.

这是HTML中惟一需要做的修改，添加“allButFooter”类的div。我用了所有的页面，那些非常短的页面，我知道页脚不会粘在底部，而且页面足够长，我已经知道我必须滚动。我这样做了，所以我可以看到，在页面内容是动态的情况下，它可以正常工作。

CSS

CSS

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

The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.

allButFooter类的最小高度值取决于viewport的高度(100vh表示100%的viewport高度)和footer的高度(我已经知道是40px)。

That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.

这就是我所做的一切，而且对我来说非常有效。我并没有在每个浏览器中都尝试过，只是Firefox、Chrome和Edge，结果都是我想要的。脚注粘在底部，你不需要弄乱z索引，位置，或任何其他属性。我文档中每个元素的位置都是默认的位置，我没有把它改成绝对的或者固定的或者任何东西。

Working with responsive design

处理响应设计

Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:

有件事我想澄清一下。这个解决方案，和40px高的Footer不像我在使用twitterbootstrap的响应式设计时所期望的那样。我必须修改函数中我要减的值:

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

This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.

这可能是因为Twitter-Bootstrap有它自己的边距和边框，所以我必须调整它的值。

I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.

我希望这对你们有用!至少，这是一个简单的解决方案，它不涉及对整个文档进行大的修改。

#7

7  

One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:

需要注意的一点是移动设备，因为它们以一种“不同寻常”的方式实现了viewport的概念:

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

http://developer.apple.com/library/ios/文档/ AppleApplications /引用/ SafariWebContent / UsingtheViewport UsingtheViewport.html # / / apple_ref / doc / uid / TP40006509-SW25

As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.

因此，使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然，这取决于你所追求的行为。

What I've used, and has worked well on desktop and mobile, is:

我在桌面和移动设备上使用的，并且在这方面做得很好，是:

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

with

与

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

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

#8

7  

Yet, another really simple solution is this one:

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

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

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

jsFiddle

jsFiddle

The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

诀窍是对整个文档使用display:table，并显示:高度为0的table-row。

Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.

由于页脚是唯一一个显示为table-row的body子对象，所以它在页面底部呈现。

#9

4  

My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:

在我的jquery方法中，如果页面内容小于窗口高度，则将页脚放在页面底部，或者将页脚放在内容之后，否则:

Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

#10

3  

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

我一直在研究这个问题。我见过不少解决方案，每一个都有问题，经常涉及一些神奇的数字。

So using best practices from various sources I came up with this solution:

因此，我利用来自不同来源的最佳实践，提出了这个解决方案:

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

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

The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

我在这里特别想要实现的是让主内容在绿色区域的页脚和页眉之间滚动。

here is a simple css:

这里有一个简单的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;
}

#11

3  

This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

这被称为粘性页脚。谷歌搜索它会得到很多结果。我已经成功地使用了CSS粘性页脚。但还有更多。

#12

2  

here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.

这是我的二分钱。在比较其他解决方案时，不需要添加额外的容器。因此，这个解决方案更加优雅。在代码示例下面，我将解释为什么这样做。

<!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>

So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.

我们首先要做的是，让最大的容器(html) 100%。html页面和页面本身一样大。接下来我们设置body height，它可以大于100%的html标记，但它至少应该和html标记一样大，因此我们使用min-height 100%。

We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.

我们也使身体相对。相对意味着您可以将块元素从其原始位置移动到其周围。我们这里不使用这个。因为亲属有第二个用途。任何绝对元素对根(html)或第一个相对父/祖父都是绝对的。这就是我们想要的，我们想要页脚是绝对的，相对于主体，也就是底部。

The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).

最后一步是将footer设置为absolute和bottom:0，将其移动到相对的第一个父/祖父(当然是实体)的底部。

Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.

现在我们仍然有一个问题需要解决，当我们填满整个页面时，内容会在页脚下面。为什么?因为页脚不在“html流”中，因为它是绝对的。那么我们该如何解决这个问题呢?我们将在身体上添加桨底。这确保了身体实际上比它的内容更大。

I hope i made a lot clear for you guys.

我希望我已经说得很清楚了。

#13

2  

This is how i solved the same issue

这就是我解决同样问题的方法。

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>

#14

1  

Just set the html, body, and the other rows except the footer to 100%. e.g

只需将html、body和除页脚之外的其他行设置为100%。如

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

the css becomes

css变得

html, body, header, content{
height:100%;
}

#15

1  

Do this

这样做

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

You can also read about flex it is supported by all modern browsers

您还可以阅读所有现代浏览器都支持flex的内容

Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div

更新:我阅读了有关flex的文章并尝试了一下。它为我工作。希望对你也一样。我是这样实现的。这里main不是ID而是div

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

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

Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在这里，您可以阅读更多关于flex https://css-老爸老妈/css/a-guide to flexbox/的信息

Do keep in mind it is not supported by older versions of IE.

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

#16

1  

You can do this

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

#17

0  

A very simple flex solution that do not assume fixed heights or changing position of elements.

这是一种非常简单的flex解决方案，它不采用固定的高度或改变元素的位置。

HTML

HTML

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

CSS

CSS

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

main {
  flex: 1;
}

Browser Support

浏览器支持

All major browsers, except IE11 and below.

所有主要的浏览器，除了IE11和以下版本。

Make sure to use Autoprefixer for appropriate prefixes.

确保使用自动修复程序进行适当的前缀。

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}
<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

#18

0  

Dynamic one liner using jQuery

All CSS methods I have come across are too rigid. Also, setting the footer to fixed is not an option if that's not part of the design.

我遇到的所有CSS方法都太死板了。此外，如果不是设计的一部分，那么将页脚设置为fixed也不是一个选项。

Tested on:

测试:

  • Chrome: 60
  • 铬:60
  • FF: 54
  • FF:54
  • IE: 11
  • 即:11

Assuming this layout:

假设这个布局:

<html>

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

</html>

Use the following jQuery function:

使用以下jQuery函数:

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

What that does is set the min-height for #content to the window height - the height of the footer what ever that might be at the time.

这样做的目的是将#content的最小高度设置为窗口的高度——页脚的高度，以及当时可能的高度。

Since we used min-height, if #content height exceeds the window height, the function degrades gracefully and does not any effect anything since it's not needed.

由于我们使用了min-height，如果#content height超过窗口高度，则函数会优雅地降级，并且不会产生任何影响，因为不需要它。

See it in action:

在行动:

$("#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>

Same snippet on JsFiddle

相同的片段JsFiddle

Bonus:

We can take this further and make this function adapt to dynamic viewer height resizing like so:

我们可以更进一步，使这个函数适应动态查看器高度调整如下:

$(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>

#19

-1  

I have used in my many projects and never got any single issue :)

我在很多项目中都使用过，但从来没有遇到过一个问题:

for your reference, Code are in snippet

供您参考，代码在代码片段中

* {
	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>

#1

286  

A simple method is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

一种简单的方法就是将你的页面100%的设置为100%。如果您的页脚的高度没有变化，那么这个操作就很好。

Give the footer a negative margin-top:

给页脚一个负边距:

#footer {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

#2

27  

A very simple approach which works great cross browser is this:

一个非常简单的方法在跨浏览器中很有效，那就是:

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

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

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="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;
}

#3

25  

From IE7 onwards you can simply use

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

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

See caniuse for support.

看到caniuse寻求支持。

#4

25  

I've developed quite an easy method to stick the Footer at the bottom, but as most common methods, you will need to tweak it to fit your Footer's height.

我开发了一种非常简单的方法来将页脚粘在底部，但是作为最常见的方法，您需要调整它以适应页脚的高度。

VIEW DEMO

This method below uses a "trick" by placing an ::after pseudo-element on the body, and set it to have the exact height of the footer, so it will occupy the exact same space the footer does, so when the footer is absolute positioned over it, it would appear like the footer is really taking up space and eliminate the negative affects of it's absolute positioning (for example, going over the body's content)

下面这个方法使用“诡计”通过将一个::身体上伪元素后,并设置它的页脚的高度,所以它会占据相同的空间页脚,所以绝对定位在页脚时,它会像页脚是占用空间和消除它的负面影响是绝对定位(例如,在身体的内容)

HTML (basic common markup)

html, body{ height:100%; margin:0; }
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>

Below methods allow dynamic footer heights:

Using 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>

Using Table-layout

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>

#5

13  

A simple solution that i use, works from IE8+

我使用的一个简单的解决方案是IE8+

Give min-height:100% on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page. When content increases the footer shifts down with content and keep sticking to bottom.

在html上设置最小高度:100%，这样如果内容减少，页面仍然保持完整的视图端口高度，页脚位于页面底部。当内容增加时，页脚随着内容向下移动，并一直粘在底部。

JS fiddle working Demo: http://jsfiddle.net/3L3h64qo/2/

小提琴工作演示: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>

#6

13  

I've used this to stick my footer to the bottom and it worked for me:

我用这个把脚注贴在底部，它对我有用:

HTML

HTML

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

That's the only modification you have to do in the HTML, add that div with the "allButFooter" class. I did it with all the pages, those that were so short, I knew the footer wouldn't stick to the bottom, and also pages long enough that I already knew I had to scroll. I did this, so I could see that it works ok in the case that a page's content is dynamic.

这是HTML中惟一需要做的修改，添加“allButFooter”类的div。我用了所有的页面，那些非常短的页面，我知道页脚不会粘在底部，而且页面足够长，我已经知道我必须滚动。我这样做了，所以我可以看到，在页面内容是动态的情况下，它可以正常工作。

CSS

CSS

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

The "allButFooter" class has a min-height value that depends on the viewport's height (100vh means 100% of the viewport height) and the footer's height, that I already knew was 40px.

allButFooter类的最小高度值取决于viewport的高度(100vh表示100%的viewport高度)和footer的高度(我已经知道是40px)。

That's all I did, and it worked perfectly for me. I haven't tried it in every browser, just Firefox, Chrome and Edge, and the results were as I wanted. The footer sticks to the bottom, and you don't have to mess with z-index, position, or any other properties. The position of every element in my document was the default position, I didn't change it to absolute or fixed or anything.

这就是我所做的一切，而且对我来说非常有效。我并没有在每个浏览器中都尝试过，只是Firefox、Chrome和Edge，结果都是我想要的。脚注粘在底部，你不需要弄乱z索引，位置，或任何其他属性。我文档中每个元素的位置都是默认的位置，我没有把它改成绝对的或者固定的或者任何东西。

Working with responsive design

处理响应设计

Here's something I would like to clear out. This solution, with the same Footer that was 40px high didn't work as I expected when I was working in a responsive design using Twitter-Bootstrap. I had to modify the value I was substracting in the function:

有件事我想澄清一下。这个解决方案，和40px高的Footer不像我在使用twitterbootstrap的响应式设计时所期望的那样。我必须修改函数中我要减的值:

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

This is probably because Twitter-Bootstrap comes with its own margins and paddings, so that's why I had to adjust that value.

这可能是因为Twitter-Bootstrap有它自己的边距和边框，所以我必须调整它的值。

I hope this is of some use for you guys! At least, it's a simple solution to try, and it doesn't involve making big changes to the whole document.

我希望这对你们有用!至少，这是一个简单的解决方案，它不涉及对整个文档进行大的修改。

#7

7  

One thing to be wary of is mobile devices, since they implement the idea of the viewport in an 'unusual' way:

需要注意的一点是移动设备，因为它们以一种“不同寻常”的方式实现了viewport的概念:

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

http://developer.apple.com/library/ios/文档/ AppleApplications /引用/ SafariWebContent / UsingtheViewport UsingtheViewport.html # / / apple_ref / doc / uid / TP40006509-SW25

As such, using position: fixed; (as i've seen recommended in other places) usually isn't the way to go. Of course, it depends upon the exact behaviour you're after.

因此，使用位置:固定;(正如我在其他地方看到的推荐)通常不是正确的方法。当然，这取决于你所追求的行为。

What I've used, and has worked well on desktop and mobile, is:

我在桌面和移动设备上使用的，并且在这方面做得很好，是:

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

with

与

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

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

#8

7  

Yet, another really simple solution is this one:

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

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

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

jsFiddle

jsFiddle

The trick is to use a display:table for the whole document and display:table-row with height:0 for the footer.

诀窍是对整个文档使用display:table，并显示:高度为0的table-row。

Since the footer is the only body child that has a display as table-row, it is rendered at the bottom of the page.

由于页脚是唯一一个显示为table-row的body子对象，所以它在页面底部呈现。

#9

4  

My jquery method, this one puts the footer at the bottom of the page if the page content is less than the window height, or just puts the footer after the content otherwise:

在我的jquery方法中，如果页面内容小于窗口高度，则将页脚放在页面底部，或者将页脚放在内容之后，否则:

Also, keeping the code in it's own enclosure before other code will reduce the time it takes to reposition the footer.

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();

#10

3  

I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.

我一直在研究这个问题。我见过不少解决方案，每一个都有问题，经常涉及一些神奇的数字。

So using best practices from various sources I came up with this solution:

因此，我利用来自不同来源的最佳实践，提出了这个解决方案:

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

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

The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.

我在这里特别想要实现的是让主内容在绿色区域的页脚和页眉之间滚动。

here is a simple css:

这里有一个简单的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;
}

#11

3  

This is known as a sticky footer. A google search for it comes up with a lot of results. A CSS Sticky Footer is the one I've used successfully. But there are more.

这被称为粘性页脚。谷歌搜索它会得到很多结果。我已经成功地使用了CSS粘性页脚。但还有更多。

#12

2  

here is my two cents. In comparisson to other solutions, one does not need to add extra containers. Therefor this solution is a bit more elegant. Beneath the code example i'll explain why this works.

这是我的二分钱。在比较其他解决方案时，不需要添加额外的容器。因此，这个解决方案更加优雅。在代码示例下面，我将解释为什么这样做。

<!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>

So the first thing we do, is make the biggest container( html ) 100%. The html page is as big as the page itself. Next we set the body height, it can be bigger than the 100% of the html tag, but it should at least be as big, therefore we use min-height 100%.

我们首先要做的是，让最大的容器(html) 100%。html页面和页面本身一样大。接下来我们设置body height，它可以大于100%的html标记，但它至少应该和html标记一样大，因此我们使用min-height 100%。

We also make the body relative. Relative means you can move the block element around relative from its original position. We don't use that here though. Because relative has a second use. Any absolute element is either absolute to the root (html) or to the first relative parent/grandparent. That's what we want, we want the footer to be absolute, relative to the body, namely the bottom.

我们也使身体相对。相对意味着您可以将块元素从其原始位置移动到其周围。我们这里不使用这个。因为亲属有第二个用途。任何绝对元素对根(html)或第一个相对父/祖父都是绝对的。这就是我们想要的，我们想要页脚是绝对的，相对于主体，也就是底部。

The last step is to set the footer to absolute and bottom:0, which moves it to the bottom of the first parent/grandparent that is relative ( body ofcourse ).

最后一步是将footer设置为absolute和bottom:0，将其移动到相对的第一个父/祖父(当然是实体)的底部。

Now we still have one problem to fix, when we fill the complete page, the content goes beneath the footer. Why? well, because the footer is no longer inside the "html flow", because it is absolute. So how do we fix this? We will add padding-bottom to the body. This makes sure the body is actually bigger than it's content.

现在我们仍然有一个问题需要解决，当我们填满整个页面时，内容会在页脚下面。为什么?因为页脚不在“html流”中，因为它是绝对的。那么我们该如何解决这个问题呢?我们将在身体上添加桨底。这确保了身体实际上比它的内容更大。

I hope i made a lot clear for you guys.

我希望我已经说得很清楚了。

#13

2  

This is how i solved the same issue

这就是我解决同样问题的方法。

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>

#14

1  

Just set the html, body, and the other rows except the footer to 100%. e.g

只需将html、body和除页脚之外的其他行设置为100%。如

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

the css becomes

css变得

html, body, header, content{
height:100%;
}

#15

1  

Do this

这样做

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

You can also read about flex it is supported by all modern browsers

您还可以阅读所有现代浏览器都支持flex的内容

Update: I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the div

更新:我阅读了有关flex的文章并尝试了一下。它为我工作。希望对你也一样。我是这样实现的。这里main不是ID而是div

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

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

Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

在这里，您可以阅读更多关于flex https://css-老爸老妈/css/a-guide to flexbox/的信息

Do keep in mind it is not supported by older versions of IE.

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

#16

1  

You can do this

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}

#17

0  

A very simple flex solution that do not assume fixed heights or changing position of elements.

这是一种非常简单的flex解决方案，它不采用固定的高度或改变元素的位置。

HTML

HTML

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

CSS

CSS

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

main {
  flex: 1;
}

Browser Support

浏览器支持

All major browsers, except IE11 and below.

所有主要的浏览器，除了IE11和以下版本。

Make sure to use Autoprefixer for appropriate prefixes.

确保使用自动修复程序进行适当的前缀。

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
}

main {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

/////////////////////////////////////////////

header,
main,
footer {
  margin: 0;
  display: block;
}

header,
footer {
  min-height: 80px; 
}

header {
  background-color: #ccc;
}

main {
  background-color: #f4f4f4;
}

footer {
  background-color: orange;
}
<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

#18

0  

Dynamic one liner using jQuery

All CSS methods I have come across are too rigid. Also, setting the footer to fixed is not an option if that's not part of the design.

我遇到的所有CSS方法都太死板了。此外，如果不是设计的一部分，那么将页脚设置为fixed也不是一个选项。

Tested on:

测试:

  • Chrome: 60
  • 铬:60
  • FF: 54
  • FF:54
  • IE: 11
  • 即:11

Assuming this layout:

假设这个布局:

<html>

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

</html>

Use the following jQuery function:

使用以下jQuery函数:

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

What that does is set the min-height for #content to the window height - the height of the footer what ever that might be at the time.

这样做的目的是将#content的最小高度设置为窗口的高度——页脚的高度，以及当时可能的高度。

Since we used min-height, if #content height exceeds the window height, the function degrades gracefully and does not any effect anything since it's not needed.

由于我们使用了min-height，如果#content height超过窗口高度，则函数会优雅地降级，并且不会产生任何影响，因为不需要它。

See it in action:

在行动:

$("#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>

Same snippet on JsFiddle

相同的片段JsFiddle

Bonus:

We can take this further and make this function adapt to dynamic viewer height resizing like so:

我们可以更进一步，使这个函数适应动态查看器高度调整如下:

$(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>

#19

-1  

I have used in my many projects and never got any single issue :)

我在很多项目中都使用过，但从来没有遇到过一个问题:

for your reference, Code are in snippet

供您参考，代码在代码片段中

* {
	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>

标签：

相关文章