页脚底部上方的页脚，而不是位于页面内容的底部

Question

我试图让页脚停留在页面的底部，而不是屏幕的底部（固定），但是在整个页面的底部，所以你只能在滚动到底部后看到它。然而，由于某种原因，它仍然高于底部，我似乎无法找到原因...... 小提琴： https://jsfiddle.net/okfudezn/

图像：

HTML（div没有包装器等）：

<div class="footer">
        <a>REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved</a>
    </div>

CSS：

.footer {
    background-color: #4b4c46;
    height: 55px;
    line-height: 55px;
    width: 100%;
    text-align: center;
    color: #e1dac5;
    font-size: 14px;
}

Answer 1

只需将内容div高度替换为auto即可 updated fiddle

int

Answer 2

我会尝试：

.footer {
    position: absolute;
    bottom: 0;
}

Answer 3

你走了！

html, body {
	margin:0;
	padding:0;
  height: 100%;
}

#container {
  position: relative;
  height: auto;
  min-height: calc(100% - 54px);
  padding-top: 54px; /* Header & Footer */
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 54px;
  background: red;
}

#content {
  background: orange;
  height: 100%;
}

#footer {
  position: absolut;
  bottom: 0;
  width: 100%;
  height: 54px;
  background: yellow;
}

.simulateContent {
  height: 1000px;
}

<div id="container">
  <div id="header">
    HEADER
  </div>
  <div id="content">
    CONTENT START
    <div class="simulateContent"></div>
    CONTENT END
  </div>
  <div id="footer">
    FOOTER
  </div>
</div>

Answer 4

更改此css

> x = 17**100
> y = 17**200    
> y % x
0
> (y + 1) % x
1

https://jsfiddle.net/okfudezn/