当内容不超过滚动高度时，CSS'内容页脚'会粘到底部，但当内容不符合内容时，它会自动流入内容

Question

这是一个棘手的问题......

说我是否有以下内容:(见图表）。

如果内容+'内容页脚'未超过滚动高度，我需要将“内容页脚”放在页面底部。 （见图，例A）

如果内容+'内容页脚'超出了滚动高度，那么当内容增加时，我希望在主内容之后有'内容页脚'流，就像它是另一个块元素一样，但是是全宽这页纸。 （见图B）

Answer 1

可以用flex制作

http://codepen.io/HerrSerker/pen/GpaxNJ

#content-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 0;
  left: 0;right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow-y: visible;
}

#content {
  width: 400px;
  margin: 0 auto;
  background-color: silver;
  padding: 20px;
}
#actual-footer {
  position: fixed;
  bottom: 0;
  left: 0;right: 0;
  height: 20px;
  background-color: gold;
  text-align: center;
  padding: 5px;
}

#content-footer {
  margin-bottom: 30px;
  background-color: blue;
  color:white;
  text-align: center;
  padding: 5px;
  padding-top: 50px;
}

body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
}

body,html {
  height: 100%;
}

<div id="content-wrapper">
  <div id="content">
    <h1>Content</h1>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
  <div id="content-footer">Content Footer</div>
</div>
<div id="actual-footer">Actual Footer</div>

  

修改

如果flex不好，您应该尝试使用展示table，table-row和table-cell