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

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 高度更改为自动 updated fiddle

.content {
    position: relative;
    width: 650px;
    height: auto;
    background-color: #e6e6e6;
    border: 1px solid #bcbcbc;
    margin: 0 auto;
    margin-bottom: 80px;
    top: -100px;
}

Answer 2

我会尝试：

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

Answer 3

改变这个css

.content {
    background-color: #e6e6e6;
    border: 1px solid #bcbcbc;
    /*height: 650px;*/ /*Remove this*/
    margin: 0 auto 30px;/*Change this*/
    overflow: hidden;/*Add this*/
    position: relative;
    /*top: -100px;*//*Remove this*/
    width: 650px;
}
.grid {
    width: 600px;
    /*height: 1000px;*/ /*Remove this*/
    margin: 0 auto;
    padding-top: 30px;
}

https://jsfiddle.net/okfudezn/

Answer 4

给你！

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>