23

我在这里和其他地方寻找过类似的问题，但我似乎找不到明确的答案。当我向页面添加足够的文本以使其到达页脚时，页脚只是与文本重叠。如果我减小浏览器窗口的大小以强制页脚和容纳内容的容器相遇，同样的事情。有时，这也体现在“容器”（即浅灰色部分）中，由于某种原因而缩小，尽管它应该始终占据 100% 的高度。

这是让我彻夜难眠的东西，所以我的想法不是很清楚。我确信这是一些愚蠢且易于修复的事情，但我不是专业设计师，我肯定错过了问题所在。

下面是我的代码，以及我用页面的所有相关部分制作的 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%;
}
<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>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.</div>
    <div id="footer">This is a footer.</div>
</body>

这是一个JSFiddle 示例。

4

6 回答 6

25

改变这个：

#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%;
}

演示

于 2013-09-24T19:54:29.283 回答
11

任何在 2017 年偶然发现这一点的人都应该知道，发明了一个很好的选择来缓解诸如flexbox 之类的布局难题。

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

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

然后应用于flex:1 1 auto“主要”或中间部分，在这种情况下#container，这将使其垂直扩展以填充可用空间，确保页脚将粘在底部：

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

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

这是上面的示例片段：

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>

于 2017-06-20T19:49:57.730 回答
8

见演示

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

更新的 CSS

#footer {
 bottom: 0;
 color: #707070;
 height: 2em;
 left: 0;
 position: fixed; /* OldProperty */
 position: static;/* Updated Property */
 font-size: small;
 width:100%;
}
于 2013-10-09T09:00:59.450 回答
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>

展开代码片段并查看完整大小的结果以了解它是如何工作的。

于 2018-02-23T17:16:40.953 回答
1

先写这段代码

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

希望对你有帮助 ：）

于 2017-05-12T12:19:50.787 回答
-1 
 #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%;
 }
于 2016-10-21T06:02:34.997 回答