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

因为您已经在使用flexbox布局。有一种叫做 flex-grow (flex grow属性指定该项目相对于同一容器中其他灵活项目的增长量)。

只需给出:

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

并从中删除高度 .content .

指定html页面的小数点高度。否则页面高度足以容纳所有ur元素; html, body { height: 1000px; }

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

更新答案:

html高度应设置为最小高度,以便在需要时可以增长。但由于这个主体不知道父元素(html)的正确性,因此我们不能再使用基于%的最小高度。 谢天谢地,我们有视口单位。因此,对于body set min-height: 100vh; 这会告诉body最小为视口高度的100%。

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

附言您还需要使用此解决方案从正文中删除边距。或者会有一个始终可见的滚动条。

将背景放在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

希望这会有所帮助;)