1

これが私のフッターcssです：

 .footer {
      background-color: #CACACA;
      font-size: 20px;
      height: 50px;
      padding-top: 10px;
      position: absolute;
      text-align: center;
      width: 100%;
      }

複数のページに、テキストを含むコンテナがあります。一部のページには、ページの最後にフッターが表示されるのに十分なコンテンツがあります。ただし、コンテンツが十分でない場合は、フッターがコンテナーの下に表示されますが、コンテナーとページの終わりの間にギャップがあります。コンテナの長さに関係なく調整されるようにこれを修正するにはどうすればよいですか？

4

2 に答える 2

3

そのようです

  <!DOCTYPE html>
<html>
<head>
    <title>My Amazing Footer</title>
    <style>
    html, body {
       margin:0;
       padding:0;
       height:100%;
    }
    .wrapper {
       min-height:100%;
       position:relative;
    }
    footer{
        background:#F1F1F1;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height:300px;
    }

    footer p{
        text-align: center;
        padding-top:100px;
    }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="Content">
            <p>HTML Ipsum Presents</p>
        </div>
        <footer>
            <p>&copy; My Website 2013. All Rights Reserved!</p>
        </footer>

    </div>
</body>
</html>

ラッパーにフッターがあり、フッターがラッパーの下部と左側に絶対的であることがわかります。次に、フッターの高さをラッパーの下部のパディングに追加し、ラッパーと本体のデフォルトの高さを追加します。ここでjsfiddleを見てください-http ://jsfiddle.net/eTwJh/2/そしてここにコンテンツのないものがあります-http: //jsfiddle.net/eTwJh/3/

于 2013-03-02T22:23:37.077 に答える
1

対応するHTMLが表示されない場合、問題が何であるかを推測するのは少し難しいです。メインセクション内のコンテンツが限られている場合、メインコンテンツに下マージンがあり、ページの下部がフッターを超えて押し下げられているようです。

これを修正するには、そのマージンを調整するか、フッターの位置を変更します。現時点では、位置は絶対的です。つまり、フッターはHTML内の親要素に基づいて配置されます。位置を相対に切り替えると、HTMLでその直前にある要素の直後に表示されます。

この問題にさらに取り組む前に、CSSの位置付けについて詳しく読むことをお勧めします。

于 2013-03-02T22:17:51.793 に答える