Question

我是一个简单的网页，其中包含背景上的this.data（背景上的绿色矩形）和第二个<div>，即＆＃34; body＆＃34;它包含段落，表格等

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

请参阅我的简单代码

在jsfiddle上更好（查看页脚下的空格），请参阅here please

＆＃13;

<div>

＆＃13;

.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;
}

＆＃13;

Answer 1

您忘记删除margin的默认body。

在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>

Answer 2

为了获得最佳效果，请始终设置正文和html 0 margin以及0 padding。

body,html{
   margin:0;
   padding:0;
}

Answer 3

＆＃13;

Text

＆＃13;

body {
  margin: 0;
}
.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:10px auto;
  background-color:gold;
  text-align:center;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
}

＆＃13;

修改内容css：

<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 4

将此添加到.footer

margin-top:50px;

Answer 5

也许你想把你的页脚贴在底部？

清除填充和边距：

html, body {
   padding:0;
   margin:0;
}

然后

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

工作fiddle

Answer 6

将body的最小高度设置为100％并将position设置为absolute。

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
}

html, body{
  padding: 0;
  margin: 0;
}

html{
  height: 100%;
}    
body{      
  min-height: 100%;
}

footer{
  width:100%;
  height:65px;
  background-color:red;
  opacity:0.5;
  position: absolute:
  bottom: 0;
}

<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 7

对于这种情况，您只需将body标记的margin和padding设置为0.

body {
    margin: 0;
    padding: 0;
}

或者，如果您的网站指定了边距，则只能将正文的下边距设置为。

body {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

Answer 8

＆＃13;

.bg-green{
  width:100%;
  height:100px;
  background-color:green;
}

.content{
  width:80%;
  height:300px;
  margin:-50px auto;
  background-color:gold;
  text-align:center;
  padding-top:100px;
}

footer{
  width:100%;
  height:65px;
  margin-top: -65px;
  background-color:red;
  opacity:0.5;
  position: absolute;
  bottom: 0
}
body {
  margin: 0;
  min-height: 100%;
  padding-bottom: 100px;
  position: relative;
  box-sizing: border-box;
}
html {
  height: 100%;
}

＆＃13;

<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>

＆＃13;

您可以通过position: absolute;

在底部修改页脚

Updated fiddle

Answer 9

在页脚类

中使用position: absolute;bottom: 0;样式

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

点击此处Live Demo

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

9 个答案: