2

私の目的：固定された静的なフッターを持つホームページを作成すること。これを説明する最も簡単な方法は、このWebサイト（http://www.foxtie.com/ ）を参照することです。私は彼らがキツネでやったようなことをやろうとしていて、フッターに固執しているだけです。フッター全体が実際の画面の下から動かないようにしたいと思っています。

私のコード：私は変更し、変更せず、すべてを再変更しました。ですから、1時間前よりも20歩先にいるのかもしれません。これが私が持っているものです。（私と一緒に、最初の投稿をここに置いてください、そして私はhtml / cssで非常に錆びています）。

どんな助けでも大歓迎です。

HTML：

<html>
<body>
<div id="container">
  <div id="nav"></div>
  <div id="content"></div>
  <div id="footer">
    <div id="imginthefooter"></div>
  </div>
</div> 
</body>
</html>

CSS：

body    {
    height: 100%;
    margin: 0px;
}

html {
    background-color: #999;
    margin: 0px;
    height: 100%;
}

#container {
    min-height: 100%;
    background-color: #666;
    position: relative;
}

#content    {
    overflow: auto;
    background-color:#333;
}


#footer {
    background-color:#000;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height:100px;
    overflow: hidden;       
}

#imginthefooter {       
    background: url(Images/Elk.png);
    width:100px;
    height:300px;
    z-index:300;
    bottom: 0px;
    top: -108px;
    right: -150px;
    position: relative;
}
4

1 に答える 1

1

Alien 氏がコメントで提供したリンクは、スティッキー フッター用です。これは、ページのコンテンツの量に関係なく、画面の下部にフッターを表示する場合に便利です。あなたが実際に望んでいるのは、フッターが常にページの下部に表示されることです。つまり、下にスクロールしてもフッターはそのままです。この場合、次のコードが必要です。

#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100px;
}

固定位置では、フッターが画面の下部に永続的に配置されます。フッター内に固定画像を追加するには、相対 div と絶対 div の両方が必要です。次のコードは、必要なものを取得します。

​&lt;div id="footer">
  <div id="footerContainer">
    <div id="imginthefooter"></div>

    . . . Any additional footer elements go here . . .

  </div>
</div>​​​​​​​​​

#footer {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    height:100px;
}

#footerContainer {
    position:relative;
    width:100%;
    height:100px;
}

#imginthefooter {       
    background: url(Images/Elk.png) no-repeat;
    width:100px;
    height:300px;
    top: -108px;  /* Position element */
    right: 150px; /* Position element */ 
    position: absolute;
}​​​​​​​​​

固定要素内の相対コンテナーにより、そのコンテナーを基準にしてヘラジカの画像を配置できます。

于 2012-10-07T07:08:08.137 に答える