Question

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

我拍了一张照片以便更清楚：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; }

我还制作了一个代码：https://codepen.io/nickm10/pen/XVJjGb

任何人都知道解决方案吗？

谢谢！

Answer 1

指定html页面的decire height。此外，页面足够高，以适应所有ur元素; html, body { height: 1000px; }

Answer 2

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

更新回答：

html高度应设置为min-height，以便在需要时可以增长。但是由于这个主体不知道父（html）元素的正确，因此我们不能再使用基于％的min-height了。谢天谢地，我们有视口单元。所以对于body set min-height: 100vh;这会告诉body只有100％的视口高度。

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

PS！您还需要使用此解决方案从身体中删除边距。或者总会看到滚动条。

Answer 3

由于您已经在使用flexbox布局。有一种叫做flex-grow的东西（flex-grow属性指定项目相对于同一容器内其他灵活项目的增长量）。

请给：

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

并从.content移除身高。

Answer 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：codepen.io/anon/pen/vpEgxo

希望这会有所帮助;）

身体背景和页脚在页面底部

4 个答案: