正文背景和页脚位于页面底部

Question

I can't find a solution to this issue. 我找不到解决此问题的方法。 I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed). 我希望页脚始终位于底部（而不是固定/固定），并且背景始终位于底部（而不是固定/固定）。

I made a picture to make it more clear: https://i.imgur.com/qVLb1bl.png 我做了一张图片使其更加清晰： 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: 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; }

I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb 我还制作了一个Codepen： https ://codepen.io/nickm10/pen/XVJjGb

Anyone know the solution? 有人知道解决方案吗？

Thanks! 谢谢！

Answer 1

Specify the decire height of the html page. 指定html页面的Decree高度。 Else the page is high enough to fit all of ur element; 其他页面的高度足以容纳您的所有元素； html, body { height: 1000px; }

Answer 2

Use min-height: 100%; 使用min-height: 100%; for html and body instead of height: 100%; 对于html和body而不是height: 100%;

Updated answer: 更新的答案：

html height should be set as min-height so it can grow when needed. html高度应设置为min-height，以便在需要时可以增长。 But thanks to this body does not know the theight of parent (html) element and so we can't use % based min-height there anymore. 但是由于这个主体，所以不知道父元素（html）的权重，因此我们不能再在此处使用基于％的最小高度。 Thankfully we have viewport units. 幸好我们有视口单位。 So for body set min-height: 100vh; 因此，对于车身min-height: 100vh; This tells body to be minimally 100% of viewports height. 这告诉身体最小为视口高度的100％。

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

PS! PS！ You also need to remove margin from body with this solution. 您还需要使用此解决方案从正文中删除边距。 Or there will be a scrollbar visible always. 否则将始终显示滚动条。

Answer 3

Since you are already using flexbox layout. 由于您已经在使用flexbox布局。 There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container). 有一种叫做flex-grow东西（flex-grow属性指定项目相对于同一容器内其余柔性项目的增长程度）。

Just give: 只要给：

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

and remove height from .content . 并删除.content高度。

Answer 4

Put background in body pseudo element and align it there. 将背景放在人体伪元素中并在那里对齐。

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

Here is a codepen: codepen.io/anon/pen/vpEgxo 这是一个codepen： codepen.io/anon/pen/vpEgxo

Hope this will help ;) 希望这会有所帮助;）

正文背景和页脚位于页面底部

问题描述

4 个解决方案

解决方案1
0 2017-12-13 12:34:10

解决方案2
0 2017-12-13 12:36:56

解决方案3
0 已采纳 2017-12-13 12:43:19

解决方案4
0 2017-12-14 10:49:09

正文背景和页脚位于页面底部

问题描述

4 个解决方案

解决方案1 0 2017-12-13 12:34:10

解决方案2 0 2017-12-13 12:36:56

解决方案3 0 已采纳 2017-12-13 12:43:19

解决方案4 0 2017-12-14 10:49:09

解决方案1
0 2017-12-13 12:34:10

解决方案2
0 2017-12-13 12:36:56

解决方案3
0 已采纳 2017-12-13 12:43:19

解决方案4
0 2017-12-14 10:49:09