Question

制作包含两个基本BODY代码FOOTER和100% width的网页。 50px high，页脚100%，正文为background-size:cover;。正文背景图片已应用.footer_wrapper { width:100%; height: 50px; clear:both; position:absolute; bottom:0; z-index:10; opacity:0.5; overflow:auto; } 让页脚粘到页面底部我很好。

BODY div

我把不透明度变为一半所以我可以看到它位于背景体的顶部。我需要它上面的free()真正地坐在它上面。不应该看到页脚后面的图像。这可能吗？我看过很多教程，但所有的页脚都坐在图像的顶部。

谢谢

Answer 1

您还没有粘贴您正在使用的标记，但您可以在BODY和FOOTER的父级上使用垂直弹性框（在此示例中为.container - 请注意它应该具有高度100vh）并且使页脚占据固定的高度，并且具有背景图像的主体将自动占据剩余的空间。你提到Body和Footer是两个div标签所以我假设.body是一个类

＆＃13;

body{
  padding: 0;
  margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.body{
  display: flex;
  overflow: auto;
  flex: 1 1 auto; 
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg");
}

.footer{
  flex: 0 0 50px;
  background: black;
  opacity: 0.3;
}

.content{
  background: yellow;
  opacity: 0.6;
  width: 100%;
  color: black;
}

＆＃13;

<div class="container">
  <div class="body">
    <div class="content">Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.

Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.</div>
  </div>
  <div class="footer">
  </div>
</div>

＆＃13;

更新：如果您希望.body的内容占据.body的100％高度，请再次在正文上使用display: flex！

Answer 2

你的溢出：自动;那是你的问题吗？尝试

plugins: ['transform-runtime', ...(DEBUG ? [] : ['transform-react-remove-prop-types', 'transform-react-constant-elements', 'transform-react-inline-elements'])]

考虑边距填充和边框

http://www.w3schools.com/css/css_boxmodel.asp

Answer 3

您可以将内容div（在#my_content { height: calc(100% - 50px); }标记内，其中包含除页脚之外的所有内容）设置为此高度：

{{1}}

当页脚高50px时，它不会与页脚重叠。

显示在身体背景的页脚

3 个答案: