css3 footer固定底部

在制作网页时，我们经常会需要为网页添加一个底部区域，也称为Footer。Footer通常包含版权信息、联系方式、网站导航等信息。然而，在很多情况下，Footer并不一定能够自动固定在页面底部，这就需要我们使用一些技巧来实现了。

在CSS3中，有一种用于固定Footer在底部的方法，这种方法叫做Sticky Footer。Sticky Footer允许我们在页面内容不足时，自动将Footer固定在页面底部；当页面内容超出浏览器窗口高度时，Footer也会根据页面高度进行调整，保持固定在底部位置。下面我们一起来看一下如何实现Sticky Footer。

HTML部分：html>
    head>
    title>
    Sticky Footer/title>
    style>
.wrapper {
        min-height: 100%;
        height: auto !important;
        height: 100%;
     /*兼容IE6*/    margin: 0 auto -50px;
 /*设置下边距*/}
.footer, .push {
        height: 50px;
}
    /style>
    /head>
    body>
    div class="wrapper">
        h1>
    Hello World!/h1>
        p>
    这里是网页主体内容……/p>
        div class="push">
    /div>
    /div>
    div class="footer">
        p>
    版权信息 © 2021XXX公司。/p>
    /div>
    /body>
    /html>
    

在上面的代码中，我们首先创建了一个名为wrapper的DIV容器，它包裹了网页的主体内容以及Footer。我们设置wrapper的最小高度为100%，并将margin-bottom设为-50px，这样可以预留出Footer的高度。接着，我们创建了一个class为push的空DIV，它的高度与Footer的高度相等。这个空DIV的作用是撑开wrapper，使wrapper的下边距正好和Footer的高度相等。最后，我们创建了一个class为footer的DIV，它包含了版权信息等内容。

在CSS中，我们为wrapper和Footer分别设置了高度。同时，我们在wrapper中也设置了height:auto!important; 和height:100%；这样可以确保wrapper的高度始终等于网页可视区域的高度。

通过上述方法，我们可以轻松实现CSS3 Sticky Footer，让Footer固定在网页底部并随网页高度自动调整。在实际应用中，你可以针对不同的网页布局调整wrapper和Footer的高度，来达到最佳的固定效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！