Question

我试图制作一个贴在包装纸底部的页脚，但留下一个底边距，以便可以看到身体背景上的图案图像。

我穿过粘性页脚

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

效果很好，但我尝试向页脚/包装器/主体添加边距/填充没有。

我想这一定是一件非常简单的事情，但我找不到它。感谢任何提示/建议！

以下是相关的CSS：

* 
{
    margin: 0;
}
html, body 
{
    margin-top: 0px;
    margin-bottom: 25px;
    background-repeat: repeat;
    background-image: url(images/modulo-pattern-grey-light.gif);
    height: 100%;
}

#wrapper 
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -98px;
    background: #fff url(images/footer.gif) left bottom no-repeat;
    width: 980px;
    box-shadow: 4px 4px 5px #999;
}
.footer, .push 
{
    height: 98px;
}

.footer 
{
    margin-left: 490px;
    margin-right: 40px; 
    background-color: #bc4c9b;
}

HTML：

<div id="wraper">
<div class="header"></div>
<div class="logo">
</div>
<div class="menu_container">
<div class="main_menu">  
<ul>  
<li><a href="index.html">Home</a></li>  
<li><a class="selected" >Quiénes Somos</a></li>  
<li><a href="consultoria.html">Consultoría</a></li>  
<li><a href="capacitacion.html">Capacitación</a></li>  
<li><a href="academico.html">Académico / Artículos</a></li>  
<li><a href="alianzas.html">Alianzas</a></li> 
<li><a href="proyectos.html">Proyectos</a></li>  
<li><a href="contacto.html">Contacto</a></li>   
</ul>  
</div> 
</div>
<div class="quienes_pic"></div>
<div class="quienes_text"></div>
  <div class="push"></div>
</div>
<div class="footer"></div>

抱歉，我没有提及，但固定位置不起作用，因为我希望相同的页脚可以在不同的页面上使用不同的高度。我的想法是在所有页面中使用相同的页眉和页脚，然后分配不同的body ID以设置不同的高度

非常像通过这个网站完成：

http://www.casadelviento.com.ar/

在这种情况下，它使用不同的body ID和不同的包装器，我想可能可以用更少的代码完成并且更清晰（即我不明白为什么包装器高度之间的区别{{1身体高度）

#contenido-index

Answer 1

参考http://alt-web.com/DEMOS/CSS2-Sticky-Footer.shtml

您可以将页脚HTML定义为

   <div id="Sticky">
       <h2>Here is a Sticky Footer</h2>
       <p>Test for Sticky Footer</p>
   </div>

然后你的CSS就像

   #Sticky 
   {
       color:#FFF;
       text-shadow: 2px 2px 2px #333; 
       border: 2px solid orange;
       position:fixed;
       padding: 0 10px 0 10px;                 
       left: 0px;
       bottom: 0px;
       width: 100%;
   }

Answer 2

嘿，你可以轻松地在你的css中定义一些像这样的代码

的的CSS 的

body{background:green;} #wrapper { background:red; min-height:700px; } .footer { position:fixed; bottom:20px; height:100px; background:yellow; left:0; right:0; }

<强> HTML

<div id="wrapper">Wraper text </div> <div class="footer">Sticky footer</div>

现场演示http://jsfiddle.net/6z6Uk/

现在根据您的设计进行调整。

如何使页脚粘在底部边缘的包装底部？

2 个答案: