首页 » CSS » footer底部问题

footer底部问题

原文 http://blog.csdn.net/z858466/article/details/79122040

2018-01-22 02:00:14阅读(449)

在我们编写页面时,有时会遇到内容不足时,想固定底部的东西会上移了。其实我们想要达到的效果是,内容不足时,固定在底部,内容多时跟着页面会撑到下面去(好像有点绕,不知道说清楚没,下面看效果)

首先页面布局(固定套路):

<div class="wrapper ">
    <div class="main">
        <!--内容写在这里-->
    </div>
</div>
<div class="footer">
</div>

然后样式

*{
    margin: 0;
    padding: 0;
}
body,
html{
    height: 100%;
    width: 100%;
}
.wrapper{
    min-height: 100%;
}
.main{
    padding-bottom: 50px;/*留出底部的距离,如果内容与底部有间距的自己再加*/
}
.footer{
    height: 50px;
    background: #000;
    position: relative;
    margin-top: -50px;;
}

这时效果如图:
footer底部<a href=问题" src="http://img.blog.csdn.net/20180121184859062?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvejg1ODQ2Ng==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">
然后我们再加足够多的内容
footer底部问题
就是这样,内容多的时候就跟着会撑下去,我记得最开始写页面的时候在这上面纠结好久。

另外 有时是想在底部固定一个图标,距离页面底部也有距离,那么就相应的更改 .main 的padding-bottom 和 底部图标的样式即可。如果一直想固定在底部,不跟着滚动,那么就 position: fixed; ,没什么好说的啦。

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹