对我来说，最好的显示它(页脚)的方式是粘在底部，但不覆盖所有的内容:

#my_footer {
    position: static
    fixed; bottom: 0
}

react友好的解决方案-(不需要分隔符div)

Chris coyer(值得尊敬的CSS-Tricks网站)在sticky - footer上保持了最新的页面，现在至少有五种创建sticky footer的方法，包括使用FlexBox和CSS-Grid。

为什么这很重要?因为，对我来说，我多年来使用的早期/旧方法对React不起作用——我不得不使用Chris的flexbox解决方案——这很简单，也很有效。

下面是他的CSS-Tricks flexbox粘性页脚-看看下面的代码，它不可能更简单。

(下面的StackSnippet示例没有完美地呈现示例的底部。页脚会延伸到屏幕底部，这在现实生活中是不会发生的。)

html,身体{高度:100%;} 身体{显示:flex;flex-direction:列;} .content {flex: 1 0 auto;} /* flex:增长/收缩/伸缩基础;* / .footer {flex-shrink: 0;} /* ----以下仅为演示---- */ .footer{背景:苍绿色;} 身体< > <div class="content">Page content - height扩展到填充空间</div> <footer class="footer"> footer Content</footer> . 身体< / >

Chris还为那些喜欢网格的人演示了这个CSS-Grid解决方案。

引用:

CSS-Tricks - Flexbox的完整指南

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

如果你正在寻找一个在页面底部对齐的响应性页脚，它总是保持视口高度的80%的上距，那么这个方法应该是有用的。

查看http://1linelayouts.glitch.me/，示例4。Una Kravets解决了这个问题。

这将创建一个带有页眉、主页和页脚的3层页面。

-你的页脚将始终停留在底部，并使用空间来适应内容;

-你的标题将始终保持在顶部，并使用空间来适应内容

-你的主系统总是会使用所有可用的剩余空间(剩余的部分空间)，如果需要，足够填满整个屏幕。

HTML

<div class="parent">
  <header class="blue section" contenteditable>Header</header>
  <main class="coral section" contenteditable>Main</main>
  <footer class="purple section" contenteditable>Footer Content</footer>
</div>
    

CSS

.parent {
  display: grid;
  height: 95vh; /* no scroll bars if few content */
  grid-template-rows: auto 1fr auto;
}
    

尝试在内容和侧栏周围放置容器div(带有overflow:auto)。

如果这不起作用，您是否有任何页脚显示不正确的截图或示例链接?

我发明了一个非常简单的解决方法，对我来说非常有用。您只需在div中包装除页脚之外的所有页面内容，然后将min-height设置为视点减去页脚高度的100%。不需要在页脚或多个包装器div上进行绝对定位。

.page-body {min-height: calc(100vh - 400px);} /*将400px替换为页脚高度*/