html - 如何使用CSS将页脚放在底部？

Question

我有一个简单的网页，其中包含 <div>在背景上(背景上的绿色矩形)和第二个 <div>这是它包含段落、表格等的“正文”

在底部，我需要放置一个包含合法版权和一些社交网络按钮的简单页脚。问题是:页脚不在底部，页脚下面有一个空间，请问如何避免这种情况？

请看我的简单代码

在 jsfiddle 上更好(查看页脚下的空间)参见 here please

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>

Answer 1

您忘记删除 body 的默认 margin。

在css中设置:

body {
  margin: 0;
}

Fiddle

body {
  margin: 0;
}
.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin: -50px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

<div class="bg-green">
</div>
<div class="content">
this is the "body" of my page (kind of a wrapper) it needs to be like this (with negative margin top)
</div>

<footer>this is the footer</footer>