css 在页面底部制作页脚棒

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 在页面底部制作页脚棒相关的知识,希望对你有一定的参考价值。

<!--
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS.
-->
<html>
    <head>
        <link rel="stylesheet" href="layout.css" ... />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>
/*
The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
*/
* {
  margin: 0;
}
html, body {
  height: 100%;
}
.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -4em;
}
.footer, .push {
  height: 4em;
}

以上是关于css 在页面底部制作页脚棒的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 CSS 制作粘性页脚?

CSS:即使在滚动时也使页脚始终位于页面底部

如何在页面底部但在(未固定)页脚上方制作固定的“转到顶部”按钮?

DIV+CSS:页脚永远保持在页面底部

页面底部的 CSS 页脚

CSS:页面底部的页脚重叠内容并具有更高的宽度