Question

我在这里和其他地方环顾四周寻找类似的问题，但我似乎无法找到明确的答案。当我向页面添加足够的文本以进入页脚时，页脚只是重叠文本。如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器满足，则同样如此。偶尔，这也表现在“容器”中也称为浅灰色部分，由于某种原因收缩，即使它应该总是占据高度的100％。

这种东西让我整晚都在忙，所以我的想法并不是很清楚。我确信这是一个愚蠢且容易修复的东西，但我不是一个专业的设计师，我当然不知道问题是什么。

下面是我的CSS，以及我用页面的所有相关部分制作的JSFiddle。

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

html, body {
    background: #252525; 
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    text-align: center;
}

body {
    background: #363636;
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    margin: 0 22.5%;
}

#container {
  color: white;
  margin-bottom: 2em;
  min-height: 100%;
  overflow: auto;
  padding: 0 2em;
  text-align: justify;
}

#footer {
  bottom: 0;
  color: #707070;
  height: 2em;
  left: 0;
  position: fixed;
  font-size: small;
  width:100%;
}

A mockup of a typical page.

Answer 1

改变这个：

#footer {
    bottom: 0;
    color: #707070;
    height: 2em;
    left: 0;
    position: relative; //changed to relative from fixed also works if position is not there
    font-size: small;
    width:100%;
}

Demo

Answer 2

请参阅DEMO

我做了一些CSS更改。看一看。我希望它会对你有所帮助。

更新了CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}

Answer 3

任何在2017年遇到这种情况的人都应该知道，发明了一个很好的选择来减轻布局问题，例如flexbox。

基本上，您所要做的就是将<body>设置为：

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

然后将flex:1 1 auto应用于“main”或中间部分，在本例中为#container，这将使其垂直展开以填充可用空间，确保页脚将粘贴到底部：

#container {
      flex: 1 1 auto;  /*grow vertically*/
}

我们在flex父级中添加了align-items:center来处理跨轴居中（在我们的例子中是水平）。

以下是上述示例摘录：

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #252525;
  border-left: 1px solid #111;
  border-right: 1px solid #111;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#container {
  color: white;
  background: #363636;
  padding: 2em;
  background: #363636;
  flex: 1 1 auto;
  /*grow vertically*/
  width: 55%;
  text-align: center;
}

#footer {
  color: #707070;
  height: 2em;
  font-size: small;
}

<body>
  <div id="container">
    <h1>A webpage</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius
      nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p>
    <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat
      libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p>
  </div>
  <div id="footer">This is a footer.</div>
</body>

Answer 4

首先编写此代码

footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:fixed;
left:0;
bottom:0;
width:100%;

}

现在设置媒体查询

@media only screen and (max-width: 767px){
footer {
background-color: #000;
color: #FFFFFF;
font-size:.8em;
margin-top:25px;
padding-top: 15px;
padding-bottom: 10px;
position:static;
left:0;
bottom:0;
width:100%;

} }

希望这会对你有所帮助:)。

Answer 5

我相信你正在寻找一个粘滞的页脚，它在没有固定到页面底部时保持不变（因此没有重叠）。我想添加这个答案，因为对我来说（它有效）并且它更接近我所寻找的东西。

解决方案

解决方案来自Chris Bracco，我将详细说明重现效果所需的内容：

HTML

您的HTML就像：

<html>

<body class="body-for-sticky">
    <...> your content </...>
    <div class="footer sticky-footer"> your footer </div>
</body>

</html>

CSS

您需要在css中添加以下内容：

html {
    height: 100%;              /* for the page to take full window height */
    box-sizing: border-box;    /* to have the footer displayed at the bottom of the page without scrolling */
}

*,
*:before,
*:after {
    box-sizing: inherit;       /* enable the "border-box effect" everywhere */
}

.body-for-sticky {
    position: relative;        /* for the footer to move with the page size */
    min-height: 100%;          /* for the footer to be at the bottom */
    padding-bottom: 6rem;      /* Space available between last element and bottom border of the page */
}

.sticky-footer {
    position: absolute;        /* for it to disappear under last body element */
    bottom: 0;                 /* so the footer can stick to the bottom*/
}

实施例

这就像创建粘性页脚所需的基本功能。这是一个例子（有一些CSS用于更好的渲染）。

html {
      height: 100%;
      box-sizing: border-box;
    }
    
    *,
    *:before,
    *:after {
      box-sizing: inherit;
    }
    
    .body-for-sticky {
      position: relative;
      min-height: 100%;
      padding-bottom: 6rem;
    }
    
    .sticky-footer {
      position: absolute;
      bottom: 0;
    }
    
/* for the rendering */

    body {
      margin: 0;
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    
    .footer {
      right: 0;
      left: 0;
      padding: 1rem;
      background-color: #efefef;
      text-align: center;
    }
    
    .demo {
      margin: 0 auto;
      padding-top: 64px;
      max-width: 640px;
      width: 94%;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Sticky footer</title>
    <style>  </style>
</head>

<body class="body-for-sticky">

  <div class="demo">
    <h1 style="margin-top: 0">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>

    <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p>
  </div>

  <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

</body>

</html>

展开代码段并观看结果的完整尺寸以了解其工作原理。

Answer 6

 #footer {
     z-index: 1;
     position: absolute;
     right: 0;
     bottom: 0;
     left: -25%;
     padding: 1rem;
     background-color: black;
     text-align: center;
     height: 3em;
     left: 0;
     font-size: small;
     width:100%;
 }

CSS：页脚重叠内容，其他故障

6 个答案:

解决方案

HTML

CSS

实施例