这篇文章主要介绍“怎么用CSS方法实现DIV固定网页底部”，在日常操作中，相信很多人在怎么用CSS方法实现DIV固定网页底部问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么
这篇文章主要介绍“怎么用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; } #footer{ position:absolute; bottom:0; padding:10px0; background-color:#AAA; width:100%; } #footerh2{ font:20px/2Arial; margin:0; padding:010px; }到此，关于“怎么用CSS方法实现DIV固定网页底部”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！
--结束END--
本文标题: 怎么用CSS方法实现DIV固定网页底部
本文链接: https://www.lsjlt.com/news/79492.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
2022-06-04
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0