0

こんにちは、ページの下部にフッターを貼り付けようとしているときに css の問題がありますが、ドキュメントの下部ではなく、ビューポートまでしか貼り付けられません。

誰かがこれがなぜなのか理解するのを手伝ってくれますか?

私の css と html は非常に単純ですが、多くの例を読んで試してみた後でも、これを機能させることはできません。フッターをラッパーの外側ではなく内側にしたくありません。また、ラッパーに高さ:​​ 100% を設定したくありません。

私のhtmlは以下のようになります：

<div class="wrapper">
... some content
</div>
<div class="footer">

</div>

そして私のCSS：

html {
   height: 100%;
   margin: 0;
   padding: 0;
   position:relative;
}

body {
    position:relative;
    height: 100%;
    background-color: #D8D8D8;
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Verdana, tahoma, arial, serif;
    font-size: 12pt;
}

.wrapper {
  position:relative;           
  margin-left: auto;
  margin-right: auto;
  width: 1024px;
  padding: 6px;
  margin-bottom: 30px;

}

.footer {
    position: absolute;
    bottom:0;
    left: 50%;
    margin-left: -512px;
    height: 25px;        
    background-color: #E6E6E6;
    width: 1024px;
    padding: 6px;
    clear:both;

}

ラッパーの外側のフッターでこれを行うことは可能ですか?

フッターに絶対位置を設定すると、body または html に基づいて配置されることを意味すると考えました。これらは position:relative を持つ次の要素であるためです。 div は、多くのコンテンツでこれをはるかに超えています。

この結果、ラッパー内に多くのコンテンツがある場合、下部がビューポートの下部として計算されるため、実際にはフッターがページの途中で固定されます。

ありがとう

4

1 に答える 1

0

ポジショニングは常に使用する必要はありません。この属性は、コンテンツを特別に「配置」する特定のケースのみを対象としています。

削除すると思います

position: absolute;

から

  .footer

問題を解決する必要があります。

于 2013-02-28T10:44:32.600 に答える