页脚位置_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:08:18
原創
1113 人瀏覽過

有的时候页面的内容高度不够,但想要页脚靠在页面最下面,看到一个不错的解决办法,跟大家分享一下。

<!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 */}
登入後複製

支持分享

谢谢分享

分享光荣!

支持分享!!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板