代码之家 › 专栏 › 技术社区 › Nick

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

footer background css html

Nick · 技术社区 · 7 年前

我找不到解决这个问题的办法。我希望有一个总是在底部的页脚(不粘/固定),还有一个总是在底部的背景(不粘/固定)。

我画了一张图,让它更清楚: 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

有人知道解决方案吗?

谢谢

4 回复 | 直到 7 年前

Ganesh Yadav Maheswaran S 7 年前

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

只需给出:

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

并从中删除高度 .content .

Gerardo BLANCO 7 年前

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

Renka 7 年前

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

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

Xopoc 7 年前

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