强制页脚位于底部并且Safari高度继承

Question

为了强制元素到其容器的底部，我需要css和html，如

#container {
  position: relative;
  width: 100%;
  min-height: 100%;
}
#content {
  width: 800px;
  min-height: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
}
#footer {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
}

<div id="container">
  <div id="content"></div>
  <div id="footer"></div>
</div>

但是为了在Safari中将内容div的高度固定为最低100％，我需要有这样的CSS

#content {
  position: absolute;
  left: 0;
  right: 0;
  width: 700px;
  min-height: 100%;
  margin: 0 auto;
  padding-bottom: 100px;
}

当内容div的高度超过100％时，这会导致页脚不会粘到容器的底部。

有没有办法让这两种影响同时发生？