1

我正在尝试制作一个贴在包装底部的页脚，但要留下底部边距，以便可以看到正文背景上的图案图像。
我遇到了粘性页脚

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>

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

很像通过这个网站完成的：

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

在这种情况下，它使用不同的主体 id 和不同的包装器，我认为可能可以用更少的代码和更清晰的方式来完成（即我不明白为什么包装器高度#contenido-index和主体高度之间存在差异）

#contenido-index {
background-color: #FFF;
height: 2040px;
width: 900px;
margin: 0 auto;
}
#contenido-chicos {
background-color: #FFF;
height: 2760px;
width: 900px;
margin: 0 auto;
}
#contenido-adultos {
background-color: #FFF;
height: 2810px;
width: 900px;
margin: 0 auto;
}
#contenido-somos {
background-color: #FFF;
height: 2150px;
width: 900px;
margin: 0 auto;
}
#contenido-historia {
background-color: #FFF;
height: 980px;
width: 900px;
margin: 0 auto;
}
#contenido-horarios {
background-color: #FFF;
height: 967px;
width: 900px;
margin: 0 auto;
}
#contenido-contacto {
background-color: #FFF;
height: 750px;
width: 900px;
margin: 0 auto;
}
#contenido-videos {
background-color: #FFF;
height: 820px;
width: 900px;
margin: 0 auto;
}
#contenido-fotos {
background-color: #FFF;
height: 595px;
width: 900px;
margin: 0 auto;
}
#body-index {
height: 2160px;
}
#body-somos {
height: 2070px;
}
#body-historia {
height: 1150px;
}
#body-horarios {
height: 1060px;
}
#body-chicos {
height: 2700px;
}
#body-adultos {
height: 2800px;
}
#body-videos {
height: 960px;
}
#body-fotos {
height: 740px;
}
#body-contacto {
height: 880px;
}
/*FOOTER}*/
#contenedor_pie {
height: 40px;
width: 500px;
float: left;
margin-left: 20px;
margin-top: 15px;
}
4

2 回答 2

2

参考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%;
   }
于 2012-04-25T05:14:30.860 回答
0

嘿，您可以轻松地在您的 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/ ​</p>

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

于 2012-04-25T08:50:00.013 回答