Heim > Artikel > Web-Frontend > 页脚位置_html/css_WEB-ITnose
页脚位置_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:08:181107Durchsuche
有的时候页面的内容高度不够，但想要页脚靠在页面最下面，看到一个不错的解决办法，跟大家分享一下。
<!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 */} 支持分享
谢谢分享
分享光荣！
支持分享!!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：css中关于文本颜色的设置问题_html/css_WEB-ITnoseNächster Artikel：新手又有问题了，ie6层重叠问题，会的大神帮帮下……_html/css_WEB-ITnose