您现在的位置是：网站首页> 编程资料编程资料
footer 贴在底部的布局实现代码_CSS布局实例_CSS_网页制作_
2023-11-01
253人已围观
简介 这个网页即使内容很少的情况下，它也始终在页面的底部。否则页面底部将留下大量空白。
footer位置自适应
ccc
sss
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
复制代码
代码如下:ccc
sss
复制代码
代码如下:html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;
margin-top: -150px; /* footer高度的负值 */
height: 150px;
background: #ddd;
clear: both;}
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
相关内容
- CSS Sprites简介以及优缺点_CSS教程_CSS_网页制作_
- CSS 避免使用滤镜_CSS教程_CSS_网页制作_
- FireFox正常 IE错位的绝对定位元素_浏览器兼容教程_CSS_网页制作_
- CSS 3D立方体制作_CSS教程_CSS_网页制作_
- css 不兼容性问题小结_浏览器兼容教程_CSS_网页制作_
- 雷霆战机刷钻石心得_无尽挑战烧饼辅助3.0刷钻石教程攻略_手机游戏_游戏攻略_
- 雷霆战机满级僚机属性排行榜一览_满级僚机哪个最好_手机游戏_游戏攻略_
- 雷霆战机五星紫色装备获得方法_五星紫色装备掉落小技巧_手机游戏_游戏攻略_
- 雷霆战机刷箱子刷金币_烧饼修改无限闯关辅助教程攻略推荐_手机游戏_游戏攻略_
- 雷霆战机装备升级攻略推荐_装备进阶材料大全_手机游戏_游戏攻略_
