您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍“怎么用CSS方法实现DIV固定网页底部”，在日常操作中，相信很多人在怎么用CSS方法实现DIV固定网页底部问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用CSS方法实现DIV固定网页底部”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
DIV固定在网页底部的CSS方法
首先看这样一下问题：“如果有一个footer层，我想让他固定出现在整个页面的最下方，不随着页面中的内容而变化，CSS中要怎样设？比如里面是一些版权信息。因为我整页的内容比较少，footer老跟着内容跑到上面去，很不美观。”
这个问题如果在以前使用表格布局，并不困难，只要给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度已经属于废止的属性，应该避免使用，而且使用Web标准以后，也不在提倡使用表格布局了，那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢？
下面就来讲解DIV固定在网页底部的实现方法。
基本思路
首先考虑外层设置一个容器DIV，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个DIV设置为#container的子DIV，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的把DIV固定在网页底部效果。
改变浏览器的高度和宽度，可以看到Footer部分的效果。
代码实现
下面先考虑HTML结构，这个演示页面的HTML代码非常简单。
Html程序代码
<body> <DIVidDIVid="container"> <DIVidDIVid="content"> <h2>Content</h2> <p>请改变浏览器窗口的高度，以观察footer效果。</p> <p>这里是示例文字，DIV固定………，这里是示例文字。</p> </DIV> <DIVidDIVid="footer"> <h2>Footer</h2> </DIV> </DIV> </body>
CSS代码：
程序代码
body,html{ margin:0; padding:0; font:12px/1.5arial; height:100%; } #container{ min-height:100%; position:relative; } #content{ padding:10px; padding-bottom:60px; /*20px(font-size)x2(line-height)+10px(padding)x2=60px*/ } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh2{ font:20px/2Arial; margin:0; padding:010px; }到此，关于“怎么用CSS方法实现DIV固定网页底部”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。