【问题标题】：How to make my footer always stay at the bottom of the page, even when the page content is smaller than the screen?如何让我的页脚始终停留在页面底部，即使页面内容小于屏幕？
【发布时间】：2014-06-17 20:09:53
【问题描述】：

我还没有向我的页面添加内容，因为我仍在处理页眉和页脚。我注意到我的页脚，而不是在页面底部，如果页面更高，它会在页面中间，在页眉的正下方。

我知道这是 CSS 中应该发生的事情，但是我如何让它进入底部呢？我尝试position: fixed; bottom: 0px;，但它会到底部，当我添加更多内容时，它会重叠或位于内容下方。

编辑：我需要页脚可以调整高度。换句话说，我不能使用height: 100px; 或其他任何东西。另外，如果内容大于页面大小，我不希望页脚粘在屏幕底部。如果屏幕高度为 720 像素，页面为 1200 像素，页脚不应位于屏幕底部。它应该在页面底部，不可见。

我该如何解决这个问题？我想不使用 JavaScript。

这是我当前的页面。我的页脚不是固定高度，我无法使用需要该高度的解决方案。

<!DOCTYPE html>
<html>
    <head>
        <style>
            body
            {
                font-family: Lato;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
            header
            {
                height: 80px;
                padding-left: 20px;
                padding-right: 5px;
                padding-top: 15px;
            }
            header h1
            {
                display: inline;
            }
            header nav
            {
                float: right;
                font-size: 18pt;
            }
            header nav a
            {
                color: #999;
                line-height: 50px;
                margin-right: 20px;
                text-decoration: none;
            }
            header nav a:hover
            {
                color: #666;
            }
            header nav a.currentPage
            {
                color: #7a7acc;
            }
            header nav a.currentPage:hover
            {
                color: #7a7acc;
            }
            footer
            {
                background-color: #f2f2f2;
                color: #666;
                font-size: 12pt;
                padding: 20px;
                text-align: center;
            }
            footer div
            {
                max-width: 750px;
                margin: 0px auto;
            }
            footer a
            {
                color: #666;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>
                <img src="logo.png" />
            </h1>
            <nav>
                <a href="/" class="currentPage">Home</a>
                <a href="/services">Services</a>
                <a href="/news">News</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>
        <footer>
            <div>
                <p>Footer text. Footer text. Footer text.</p>
            </div>
        </footer>
    </body>
</html>

【问题讨论】：

您是否使用“粘性页脚”搜索谷歌？
我发现了一些东西，像这样：matthewjamestaylor.com/blog/… - 但它要求我的页脚有一个固定的高度。我发现的几乎所有其他文章都是相同的。我需要它是可调节的。
这就是您应该在问题中包含的内容
我刚刚编辑了问题。
+1 现在这是一个更好的问题

标签： html css footer sticky-footer

【解决方案1】：

使用 css 表：

FIDDLE1 - 小内容

FIDDLE2 - 小内容 + 大页脚

FIDDLE3 - 内容丰富

标记

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}

【讨论】：

抱歉，使用display: table-row; 有点搞砸了我的布局。还有什么我可以做的吗？
很难说，不知道你当前的标记和搞砸了什么，但是额外的 wrap div 来保存你当前的内容怎么样
@PhoenixLogan - 这是更新后的小提琴：jsfiddle.net/danield770/sX9Nk/5 - 有什么问题？
表格内的边距和内边距几乎不再起作用了。
这是更新后的小提琴：jsfiddle.net/danield770/e42vh/2 就边距和填充而言 - 只需根据需要添加它们

【解决方案2】：

这是因为您的内容没有任何内容，因此页脚会上升。

这里我有解决方案如果你的结构是这样的

HTML

<header> header content goes here    </header>
<div class="container"> main content </div>
<footer> footer part </footer>

CSS

header { // header definitions  }
.container { 
       min-height: 500px;
       // other definitions  
}
footer { // footer definitions  }

即使内容为空，这也会将您的页脚置于内容的500px 下方。

【讨论】：

这是一个有趣的解决方案，但我无法确定在查看我的页面时屏幕会有多大。
您可以根据平均屏幕尺寸设置此高度，因为我每次在我的网站中使用 600px。我发现这很完美。屏幕大小随每个用户从 480 到 1280 变化，您将设置哪个？所以另一个解决方案是Javascript，否则这是最好的。
是的，但是高清电视呢？我有时会用 HDMI 线在上面放东西，包括网站。事实上，我的内容可能会比高清电视短。
对于平均分辨率使用css，并检查分辨率是否高于我们的定义应用JavaScript，@Danield解决方案还不错

【解决方案3】：

您可以使用flexbox auto margins

小例子：

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

使用上面相同的最小示例，但内容很长：

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

div {
  height: 3000px;
}

footer {
  margin-top: auto;
  background: #999999;
}

<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

使用 OP 的代码：

body {
  font-family: Lato;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

header {
  height: 80px;
  padding-left: 20px;
  padding-right: 5px;
  padding-top: 15px;
}

header h1 {
  display: inline;
}

header nav {
  float: right;
  font-size: 18pt;
}

header nav a {
  color: #999;
  line-height: 50px;
  margin-right: 20px;
  text-decoration: none;
}

header nav a:hover {
  color: #666;
}

header nav a.currentPage {
  color: #7a7acc;
}

header nav a.currentPage:hover {
  color: #7a7acc;
}

footer {
  margin-top: auto;
  background-color: #f2f2f2;
  color: #666;
  font-size: 12pt;
  padding: 20px;
  text-align: center;
}

footer div {
  max-width: 750px;
  margin: 0px auto;
}

footer a {
  color: #666;
}

<!DOCTYPE html>
<html>

<body>
  <header>
    <h1>
      <img src="logo.png" />
    </h1>
    <nav>
      <a href="/" class="currentPage">Home</a>
      <a href="/services">Services</a>
      <a href="/news">News</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <footer>
    <div>
      <p>Footer text. Footer text. Footer text.</p>
    </div>
  </footer>
</body>

</html>

【讨论】：

【解决方案4】：

几周前我在我正在开发的网站上遇到了同样的问题，经过一些搜索和反复试验，我设法找到了解决这个问题的方法。

我这里有代码，因为它有点难以解释：

HTML：

<header>
    some header<br />
</header>
<section>
    <!-- no content -->

    <!-- little content -->
    <div id="little-content">some content</div>
    <!-- a lot of content -->
    <div id="lotsa-content">some more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more content</div>
</section>
<footer>
    &copy; some footer
</footer>

CSS：

html,
body {
    margin: 0;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

header,
footer {
    background: red;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
}

section {
    margin: 1.3em 0;
}

#little-content {
    display: none;
}

#lotsa-content {
    display: none;
}

footer {
    bottom: 0;
}

这是我为你制作的JSFiddle。

我希望这会有所帮助。

EDIT1：

为了更具体地回答您的问题：您必须将 position 设为页脚的父级（我猜它是正文）absolute 并给它一个 100% 的strong>min-height（也适用于其宽度），页脚的定位相同（position: absolute;) 并用 bottom: 0; 将其粘贴到底部，最后一件事是给出 bottom margin 页脚 height 使其不重叠（由于我也将标题设为绝对，因此我也给出了上边距）。

EDIT2：

这是 JSFiddle 示例以及您提供的代码。

【讨论】：

哦，我刚刚注意到您说您的页脚不是固定高度。