DIV+CSS:页脚永远保持在页面底部_html/css_WEB-ITnose
页脚永远保持在页面底部
有时候，我们用CSS创建一个高度自适应布局，如何保证页脚（footer）在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。我看过一些利用绝对定位的例子，但总感觉不是那么完美，经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法，兼容IE5.0 ，Opera 8.5 ，Firefox 1.5 。下面我们看步骤：
1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值，同时清除所有元素的 margin 和 padding。经测试，html和body的 height: 100%; 等于整个浏览器窗口的总高度，无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的高度。是不是有点不好理解？
css 代码
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- height: 100%;
- }
2、因为上面提到的问题，所以为了让布局自适应高度，我们要加上 min-height: 100%;，虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用：
css 代码
- #wrapper {
- min-height: 100%;
- }
- * html #wrapper {
- height: 100%;
- }
这样，一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看，我加了一些宽度和背景色修饰，如下：
css 代码
- * {
- margin: 0;
- padding: 0;
- }
- html, body {
- height: 100%;
- text-align: center;
- font: 12px/1.4 Verdana, sans-serif;
- background: #f00;
- }
- #wrapper {
- width: 770px;
- min-height: 100%;
- background: #ccc;
- margin: auto;
- text-align: left;
- }
- * html #wrapper {
- height: 100%;
- }
下面看完整代码的运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <br /><br /><html xmlns="http://www.w3.org/1999/xhtml"> <br /><br /><head> <br /><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br /><br /><title>DIV+CSS:页脚永远保持在页面底部 _ 海波吧 _ www.haibor8.cn </title> <br /><br /><style type="text/css"> <br /><br />/*<![CDATA[*/ <br /><br />* { <br /><br /> margin: 0; <br /><br /> padding: 0; <br /><br />} <br /><br />html, body { <br /><br /> height: 100%; <br /><br /> text-align: center; <br /><br /> font: 12px/1.4 Verdana, sans-serif; <br /><br /> background: #F00; <br /><br />} <br /><br />#wrapper { <br /><br /> width: 770px; <br /><br /> min-height: 100%; <br /><br /> background: #ccc; <br /><br /> margin: auto; <br /><br /> text-align: left; <br /><br />} <br /><br />* html #wrapper { <br /><br /> height: 100%; <br /><br />} <br /><br />#header { <br /><br /> background: Green; <br /><br /> height: 40px; <br /><br />} <br /><br />#sidebar { <br /><br /> float: left; <br /><br /> width: 200px; <br /><br /> background: Gray; <br /><br />} <br /><br />#content-box { <br /><br /> float: right; <br /><br /> width: 570px; <br /><br /> background: Olive; <br /><br />} <br /><br />#footer { <br /><br /> height: 50px; <br /><br /> background: Background; <br /><br /> width:770px; <br /><br /> margin: auto; <br /><br />} <br /><br />/*]]>*/ <br /><br /></style> <br /><br /></head> <br /><br /><br /><br /><body> <br /><br /><div id="wrapper"> <br /><br /> <div id="header">此处显示 "header" 的内容</div> <br /><br /> <div id="content-box">此处显示 "content-box" 的内容</div> <br /><br /> <div id="sidebar">此处显示 i"sidebar" 的内容</div> <br /><br /></div> <br /><br /><div id="footer">此处显示 "footer" 的内容</div> <br /><br /></body> <br /><br /></html>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
Gitee Pages statische Website -Bereitstellung fehlgeschlagen: Wie können Sie einzelne Dateien 404 Fehler beheben und beheben?
Apr 04, 2025 pm 11:54 PM
GitePages statische Website -Bereitstellung fehlgeschlagen: 404 Fehlerbehebung und Auflösung bei der Verwendung von Gitee ...
Wie kann man adaptives Layout der Y-Achse-Position in Webanmerkungen implementieren?
Apr 04, 2025 pm 11:30 PM
Der ad-axis-Position adaptive Algorithmus für Webanmerkungen In diesem Artikel wird untersucht, wie Annotationsfunktionen ähnlich wie Word-Dokumente implementiert werden, insbesondere wie man mit dem Intervall zwischen Anmerkungen umgeht ...
HTML, CSS und JavaScript: Wesentliche Tools für Webentwickler
Apr 09, 2025 am 12:12 AM
HTML, CSS und JavaScript sind die drei Säulen der Webentwicklung. 1. HTML definiert die Webseitenstruktur und verwendet Tags wie z.
Wie verwendet ich CSS3 und JavaScript, um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken zu erreichen?
Apr 05, 2025 am 06:15 AM
Um den Effekt der Streuung und Vergrößerung der umgebenden Bilder nach dem Klicken auf das Bild zu erreichen, müssen viele Webdesigns einen interaktiven Effekt erzielen: Klicken Sie auf ein bestimmtes Bild, um die Umgebung zu machen ...
