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 に答える