522

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

我希望页脚

  • 当页面较短且屏幕未填满时，贴在窗口底部，并且
  • 当内容超过一屏时（而不是重叠内容），停留在文档末尾并正常向下移动。

CSS是继承的，让我感到困惑。我似乎无法正确更改它以在内容上设置最小高度或使页脚进入底部。

4

37 回答 37

370

以下是我的4种不同的方法：

在每个示例中，文本都是可自由编辑的，以说明内容在不同场景中的呈现方式。

1) 弹性盒

body{ height:100vh; margin:0; }

header{ min-height:50px; background:lightcyan; }
footer{ min-height:50px; background:PapayaWhip; }

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

footer{
  margin-top:auto; 
}
<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

2) 网格

body{ 
  min-height: 100vh; 
  margin: 0; 
  
  display: grid;
  grid-template-rows: auto 1fr auto;
}

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

footer{ 
  min-height:50px; 
  background:PapayaWhip; 
}
<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

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

3）position:absolute（无动态页脚高度）

body{ min-height:100vh; margin:0; position:relative; }
header{ min-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 contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

4）表格布局

html{ height:100%; }
body { min-height:100%;  margin:0; }

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

article { 
  height: 1%;
}

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

/**** Trick: ****/

body {
  display: table;
  width: 100%; 
}

body > footer {
   display: table-row;
}
<body>
  <header contentEditable>Header</header>
  <article contentEditable>Content</article>
  <footer contentEditable>Footer</footer>
</body>

于 2013-12-03T13:50:28.497 回答
367

一个简单的方法是制作100%你的页面的body，用min-heightof100%也可以。如果页脚的高度没有改变，这可以正常工作。

给页脚一个负边距顶部：

footer {
    clear: both;
    position: relative;
    height: 200px;
    margin-top: -200px;
}
于 2009-03-27T10:53:47.807 回答
65

一个非常简单的跨浏览器效果很好的方法是：

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>

于 2013-11-01T09:02:56.773 回答
49

我用它把我的页脚贴在底部，它对我有用：

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、位置或任何其他属性。我文档中每个元素的位置都是默认位置，我没有将其更改为绝对或固定或任何东西。

使用响应式设计

这是我想澄清的事情。当我使用Twitter-Bootstrap. 我不得不修改我在函数中减去的值：

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

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

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

于 2016-03-22T16:41:40.107 回答
48

一个非常简单的 flex 解决方案，它不假设固定高度或改变元素的位置。

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 及以下版本除外。

确保对适当的前缀使用Autoprefixer。

.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;
}

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

body,
html {
    margin: 0;
    padding: 0;
}

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>

于 2017-08-18T18:16:09.330 回答
44

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

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

请参阅caniuse以获得支持。

于 2013-07-23T09:35:37.560 回答
18

我使用的一个简单的解决方案，适用于 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>
于 2014-09-19T07:16:52.440 回答
16

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

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

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

jsFiddle

诀窍是将 adisplay:table用于整个文档，将display:table-rowwithheight:0用于页脚。

由于页脚是唯一显示为 as 的 body 子table-row项，因此它呈现在页面底部。

于 2014-08-09T12:56:43.830 回答
14

使用 Flexbox 将页脚保持在底部

<div style="min-height:100vh; display:flex; flex-direction:column; 
            justify-content:space-between;">
 
     <div> <!-- Wrapper (Without footer) -->
   
        <header>
         I am a header.
        </header>
  
        <article>
        I am an article!
        </article>
   
    </div> <!-- End: Wrapper (Without footer) -->
 
 
     <footer>
     I am a footer.
     </footer>
 
</div>

笔记

  • 确保您<div>使用以下 CSS 样式将所有内容包装在一个或任何其他块级元素中min-height:100vh; display:flex; flex-direction:column; justify-content:space-between; ：

  • 确保将除页脚元素之外的所有内容都包装在 a<div>或任何其他块级元素中。

  • 确保您使用<footer>或任何其他块级元素来包装页脚。

代码说明

  • min-height: 100vh确保 body 元素将至少伸展到屏幕的整个高度

  • flex-direction: column在保留堆叠的块元素方面保持正常文档流的行为（假设正文的直接子元素实际上都是块元素）。

  • justify-content:space-between将页脚推到屏幕底部。

查看如何使用 Bootstrap 5 执行相同操作（将页脚保持在底部） -链接

于 2021-06-05T06:20:53.743 回答
10

做这个

<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 不支持它。

于 2017-09-01T05:17:27.340 回答
8

这称为粘性页脚。谷歌搜索它会出现很多结果。CSS Sticky Footer是我成功使用的一个。但还有更多。

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

此代码的来源

于 2009-03-13T18:00:15.547 回答
8

需要提防的一件事是移动设备，因为它们以“不寻常”的方式实现了视口的概念：

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;
}
于 2013-04-20T13:01:09.553 回答
7

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

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>

于 2016-08-01T15:24:39.990 回答
6

为我工作。

#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}


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


#container{ 
  height:100vh; 
  margin:0; 
  display:flex; 
  flex-direction:column; 
}

#footer{
  margin-top:auto; 
}
<div id="container">
   <div id="header">header</div>
   <div id="body">body</div>
   <div id="footer">footer</div>
</div>

于 2021-05-01T10:53:56.690 回答
5 
footer {
  margin-top:calc(5% + 60px);
}

这工作正常

于 2018-10-20T05:34:33.697 回答
5

我刚刚在这里回答了类似的问题：

将页脚放置在具有固定页眉的页面底部

我是 Web 开发的新手，我知道这已经得到了回答，但这是我发现解决它的最简单方法，我认为有些不同。我想要一些灵活的东西，因为我的 Web 应用程序的页脚有一个动态高度，我最终使用了 FlexBox 和一个分隔符。

  1. 首先为您的 html 和 body 设置高度
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

于 2018-12-14T20:32:18.737 回答
4

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

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

(function() {
    $('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
于 2013-10-18T08:36:15.267 回答
4

我使用 CSS 网格实现了这一点，基本上我定义了 3 行：

  • 标题
  • 内容
  • 页脚

并且使用网格来定义大小，诀窍是在行尾对齐页脚，如下所示：

CSS

body {
    display: grid;
    grid-template-rows: auto auto auto;
}

footer {
    display: grid;
    align-self: end; /* The trick */
}

HTML 文件

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <header>
    Header content
  </header>
  
  <h1>main body</h1>
  <p>This is a paragraph.</p>
  
  <footer>
    <p>Hello there.</p>
  </footer>
</body>
</html>

您可以使用更多行，但请记住将其添加到 CSS 中，或者将所有内容包装在 div 中。

此处的本指南确实帮助我解决了这个问题。

于 2021-03-22T00:12:56.677 回答
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;
}
于 2013-09-26T17:09:45.300 回答
3

使用 Bootstrap 的 ONE line 解决方案

除了提供的所有 CSS 和 jQuery 解决方案之外，
我还列出了一个使用Bootstrap的解决方案，在body标记上带有一个类声明：d-flex flex-column justify-content-between

  • 这不需要提前知道页脚的高度。
  • 这不需要设置绝对位置。
  • 这适用于在较小屏幕上溢出的动态 div 。

html, body {
  height: 100%;
}
<html>

    <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    </head>

    <body class="d-flex flex-column justify-content-between text-white text-center">

        <header class="p-5 bg-dark">
          <h1>Header</h1>
        </header>
        <main class="p-5 bg-primary">
          <h1>Main</h1>
        </main>
        <footer class="p-5 bg-warning">
          <h1>Footer</h1>
        </footer>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    </body>

</html>

于 2020-08-14T05:25:36.817 回答
2

你可以这样做

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
于 2018-01-16T14:46:04.950 回答
2

我认为您可以将主要内容设置为视口高度，因此如果内容超出，主要内容的高度将定义页脚的位置

* {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

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

main {
  background: blue;
  /* This is the most important part*/
  height: 100vh; 
  
}
footer{
  background: black;
  height: 50px;
  bottom: 0;
}
<header></header>
<main></main>
<footer></footer>

于 2021-02-09T05:41:27.203 回答
2

fixed使用bottom,left和设置为 0 的位置right最适合我：

.footer {    
    position: fixed;
    background : #d1ccc0;
    bottom : 0;
    left : 0;
    right : 0;
    height : 50px;
}

位置absolute不会粘在底部，但fixed会。

于 2021-06-30T15:43:32.970 回答
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 页面与页面本身一样大。接下来我们设置 body 高度，它可以大于 html 标签的 100%，但至少应该一样大，因此我们使用 min-height 100%。

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

最后一步是将页脚设置为绝对和底部：0，这会将其移动到第一个相对的父/祖父的底部（当然 body ）。

现在我们还有一个问题要解决，当我们填满整个页面时，内容会位于页脚下方。为什么？好吧，因为页脚不再在“html 流”内，因为它是绝对的。那么我们如何解决这个问题呢？我们将在 body 中添加 padding-bottom。这确保了身体实际上比它的内容更大。

于 2014-12-30T15:43:20.167 回答
1

只需自定义页脚部分

.footer 
{
   position: fixed;
   bottom: 0;
   width: 100%;
   padding: 1rem;
   text-align: center;
}

 <div class="footer">
   Footer is always bootom
 </div>
于 2018-10-12T03:04:54.500 回答
1 
<!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 */
}
于 2020-05-16T08:19:47.457 回答
1

虽然我找到了许多类似的答案，但我能找到的唯一解决方案是页脚始终位于底部且未显示在现有数据之上：

footer {
    position: relative;
    clear: both;
}
于 2021-12-17T21:14:01.997 回答
0 
<!DOCTYPE html>

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

<body>
   <header class='header'></header>
   <div class="body-content">
     <!-- all other page content -->
   </div>
   <footer class="footer"></footer>
</body>

</html>

html,
body{
  height:100%;
}
body {
  display:flex,
  flex-direction: column,
}

.body-content {
  flex-grow:1   
}
于 2021-12-15T07:50:27.080 回答
0

你需要使用position: absolute;这个很重要，那么bottom:0

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
于 2021-12-16T05:14:44.930 回答
-1

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

<body>
<header></header>
<content></content>
<footer></footer>
CSS变成 
html, body, header, content{
height:100%;
}
于 2014-07-15T13:07:10.250 回答
-1

使用 jQuery 的动态一班轮

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

测试：

  • 铬：60
  • 法郎：54
  • 即：11

假设这种布局：

<html>

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

</html>

使用以下 jQuery 函数：

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

所做的是将 for 设置min-height为#content窗口高度-页脚的高度，无论当时可能是什么。

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

看看它的实际效果：

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

于 2017-09-06T06:58:54.737 回答
-1

我做了什么

html

    <div>
      <div class="register">
         /* your content*/    
      </div>
      <div class="footer" />
  <div/>

CSS

.register {
          min-height : calc(100vh - 10rem);
  }

.footer {
         height: 10rem;
 }

不需要使用 position fixed和absolute。只需以正确的方式编写html。

于 2020-07-02T16:22:42.973 回答
-1

其实很简单。此解决方案不需要知道页脚高度。

<body>
  <div class="app">
    Website
  </div>
  <div class="footer">
    Footer
  </div>
</body>

.app {
  min-height: 100vh;
}
于 2020-09-07T10:08:59.853 回答
-1

有些解决方案对我不起作用，但当我决定使用 flex 选项时，我发现的最佳选择是下面的示例。

html, body{
    height: 100%;   
}

body{
    display: flex;
    flex-direction: column;
}

.main-contents{ 
    flex: 1 0 auto;
    min-height: 100%;
    margin-bottom: -77px;
  background-color: #CCC;
}

.footer{
    height:  77px;
    min-height: 77px;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #000000;
    flex-shrink: 0;
    flex-direction: row;
    position: relative;
    
    
}

.footer-text{
  color: #FFF;
}

@media screen and (max-width: 767px){
    #content{
        padding-bottom: 0;
    }
    .footer{
        position: relative;
        /*position: absolute;*/
        height: 77px;
        width: 100%;
        bottom: 0;
        left: 0;
    }

}
<html>
  <body>
    <div class="main-contents" >
      this is the main content
    </div>
  </body>

  <footer class="footer">
    <p class="footer-text">This is the sticky footer</p>
  </footer>

</html>

于 2020-09-09T19:41:25.837 回答
-1

对于固定高度的页脚，您也可以使用css 变量来完成。

/* Globals */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - var(--navbar-height) - var(--footer-height));
  background-color: #1b1b1b;
  color: cyan;
}


/* Navbar */

:root {
  --navbar-height: 60px;
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--navbar-height);
  color: white;
  background-image: linear-gradient(75deg, yellow, orange);
}


/* Footer */

:root {
  --footer-height: 40px;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--footer-height);
  color: white;
  font-weight: 700;
  background-image: linear-gradient(70deg, yellow 0%, orange 25%, teal 25%, cyan 50%, red 50%, magenta 75%, black 75%, grey 100%);
  /* background-image: linear-gradient(70deg, black 0%, cyan 100%); */
}
<body>
  <nav class="navbar">Navbar</nav>
  <main>Main Section</main>
  <footer>&copy; Test 2021 - FOREVER ❤♾</footer>
</body>

于 2021-09-01T13:07:22.553 回答
-3

我已经在我的许多项目中使用过，但从未遇到过任何问题:)

供您参考，代码在片段中

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

于 2016-12-19T13:09:24.723 回答
-3

那个怎么样：

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

<footer>
 copyright blah blah
</footer>
于 2020-05-22T17:19:54.130 回答