页面底部的正文背景和页脚答案

【问题标题】：Body background and footer on bottom of page页面底部的正文背景和页脚
【发布时间】：2018-05-27 08:16:13
【问题描述】：

我找不到此问题的解决方案。我想要一个始终位于底部（不粘/固定）的页脚，以及始终位于底部（不粘/固定）的背景。

为了更清楚我做了一张图：https://i.imgur.com/qVLb1bl.png

<html>
 <div id="container">
  <div class="content">
   <h1>Content</h1>
  </div>
  <div class="footer">
   <h2>Footer</h2>
  </div>
 </div>
</html>

CSS：

html, body { height: 100%; }

body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }

#container { display: flex; flex-direction: column; height: 100%; }

.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }

.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }

我还做了一个codepen：https://codepen.io/nickm10/pen/XVJjGb

有人知道解决办法吗？

谢谢！

【问题讨论】：

.footer { position:absolute; top: 100%; bottom: 0; left: 0; right: 0; margin: 0 auto; text-align: center; max-width: 800px; width: 100%; height: 100px; background: #000; } ，也将页脚标签放在container div之外，必须添加top: 100%

标签： html css background footer

【解决方案1】：

因为你已经在使用 flexbox 布局了。有一种叫做flex-grow 的东西（flex-grow 属性指定了该项目相对于同一容器内的其他灵活项目将增长多少）。

只要给：

.content{
    -webkit-flex-grow: 1;    
    flex-grow: 1;
   /** remove height **/
}

并从.content 中删除高度。

【讨论】：

【解决方案2】：

指定html页面的decire高度。否则页面足够高以适合您的所有元素； html, body { height: 1000px; }

【讨论】：

我不认为给出一个固定的高度应该是一个解决方案。每个子页面都有不同的高度。
然后添加一个空格 div

【解决方案3】：

对 html 和正文使用 min-height: 100%; 而不是 height: 100%;

更新答案：

html 高度应设置为最小高度，以便在需要时可以增长。但是由于这个 body 不知道父 (html) 元素的高度，所以我们不能再使用 % based min-height 了。谢天谢地，我们有视口单位。所以对于 body set min-height: 100vh; 这告诉 body 至少是视口高度的 100%。

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

PS！您还需要使用此解决方案从正文中删除边距。否则会有一个滚动条始终可见。

【讨论】：

【解决方案4】：

将背景放在body伪元素中并在那里对齐。

body {
  ...
  position: relative;
  min-height: 100%;
  ...
}
body::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  background: url("http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg")
    no-repeat bottom center;
  pointer-events: none;
  z-index: -1;
}

这是一个代码笔：codepen.io/anon/pen/vpEgxo

希望这会有所帮助；）

【讨论】：