CSS - フッターを常に page の下部に設定する_html/css_WEB-ITnose

フッターはその名の通り、コンテンツが多い場合は一番下にあると気持ちいいのですが、コンテンツが少なくなると（画面が開けない場合）フッターは固定されません。すでにフロントエンドの仕事に携わっている人にとっては、価格比較の仕事としては初歩的な問題になるはずですが、私のフロントエンドのスキルが限られていたため、少し時間がかかりました。負のマージンを介してこの単純な関数を最終的に実装するコードは次のとおりです:

    <div class="wrapper">        <p>博客地址:http://www.cnblogs.com/xiaofeixiang/</p>        <div class="replace"></div>    </div>    <div class="footer">       博客园-FlyElephant    </div>

CSS を設定します:

    * {        margin: 0;    }        html,    body {        height: 100%;    }        .wrapper {        min-height: 100%;        height: 100%;        margin: 0 auto -202px;//通过负边距隐藏replace    }        .footer,    .replace {        height:200px;//设置高度一致    }        .footer {        border: 1px solid #6AC5AC;    }

ページコンテンツの長さに関係なく、開発のニーズを満たすことができます~