Question

我用Google搜索并尝试了我找到的所有代码，但它无法正常工作。将页脚与内容分开的唯一内容是<div id="spacer"> 我的内容和页脚之间需要空格。我正在使用wordpress localhost，因此无法提供小提琴链接。但这是现在看起来如何： http://tinypic.com/r/rcsi10/8

我需要它看起来像这样：

http://tinypic.com/r/hriwic/8

CSS

#page {
  background: white;
  width: 1020px;
  margin: 10px auto;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.site-footer {
  clear: both;
  padding: 40px 40px;
  color: #000;
text-align: center;
background: #fff;
padding: 10px;



font-size: 11px;
margin-top: 15px;
}

#spacer {
height: 20px;
width: 1020px;
margin-top: 15px;

}

HTML

<div id="main" class="site-main">
<div id="spacer">
<footer id="colophon" class="site-footer" role="contentinfo">
</div>

Answer 1

尝试在.site-footer中添加这两个css属性，尝试将像素中的顶部大小更改为所需的间隙

.site-footer{
position:relative;
top:-20px;
}

Answer 2

假设您有2个div换行，例如Div 1是顶部白色区域，而底部是页脚。有点像这样。

//just an imaginary div 
<div class="contentarea">
 ...............
</div>
<div style="clear:both"></div>   

<div id="spacer" style="margin-top:10px;">
   <footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>

正常情况下这足以在两个div内容区域和间隔符之间形成空格。确保你没有为包装纸提供bg颜色。

在页脚上方和下方添加空间

2 个答案: