页脚位置_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:08:18
Original
1112 Leute haben es durchsucht

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

<!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>
Nach dem Login kopieren


回复讨论(解决方案)

原版的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 */}
Nach dem Login kopieren

支持分享

谢谢分享

分享光荣!

支持分享!!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage