<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>footer始终居于底部</title><style type="text/css">* {
margin:0; padding:0; }
body {
font:14px/1.8 arial; }/*核心代码，html,body,wrap高度100%*/html, body,
.wrapage {
height:100%; }/*外框高度自动，最小高度100%，ie下高度100%*/
.wrapage {
height:auto;
min-height:100%;
_height:100%;
background:#CCC;
color:#fff;
font-size:18px;
text-align:center;
}/*内容主体下padding 防止底部叠加*/
.mainw { padding-bottom:80px; }/*底部相对定位，高度为主体的下padding,负margin值。*/
.footer {
position:relative;
height:80px;
margin-top:-80px;
background:#eee;
color:#fff;
font-size:16px;
text-align:center;
}</style></head><body><p class="wrapage">
<p class="mainw">
<h1>页面高度不满，底部固定</h1>
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<br />
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<p>页面高度不满，底部固定</p>
<br />
<p>页面高度不满，底部固定</p>
<br />
</p></p><p class="footer">
<h1>页面高度不满，底部固定</h1>
</p>
</body>
</html>Das obige ist der detaillierte Inhalt vonSo reparieren Sie den unteren Rand der Fußzeile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
PHP-Tutorial
Was ist der Grund, warum der Computerbildschirm schwarz ist, der Computer jedoch eingeschaltet ist?
So ändern Sie die Hintergrundfarbe eines Wortes in Weiß
Was sind die vier Big-Data-Analysetools?
So lösen Sie Probleme beim Parsen von Paketen
Win10-Tutorial zum Abrufen von Arbeitsplatzsymbolen
Was ist Spring MVC?
JavaScript:void 0
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
