Home > Article > Web Front-end > 页脚位置_html/css_WEB-ITnose
页脚位置_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:181062browse
有的时候页面的内容高度不够，但想要页脚靠在页面最下面，看到一个不错的解决办法，跟大家分享一下。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; } </style></head><body> <div style="width: 100%; margin-bottom: -100px; background: #aa8; min-height: 100%;height: auto !important; height: 100%;"> <h1>Hello World</h1> <div id="push" style="height: 100px;"></div> </div> <div id="footer" style="height: 100px; width: 100%; background: #fff;"> this is the footer </div></body></html>
回复讨论(解决方案)
原版的Css样式
/* sticky footer------------------------------*/* { margin: 0;}html, body { height: 100%;} .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -267px; /* the bottom margin is the negative value of the footer's height */}.footer, .push { height: 267px; /* .push must be the same height as .footer */} 支持分享
谢谢分享
分享光荣！
支持分享!!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：css中关于文本颜色的设置问题_html/css_WEB-ITnoseNext article：新手又有问题了，ie6层重叠问题，会的大神帮帮下……_html/css_WEB-ITnose