So platzieren Sie das Fußzeilen-Tag am Ende der Seite

Dieses Mal zeige ich Ihnen, wie Sie das Fußzeilen-Tag am Ende der Seite platzieren. Was sind die Vorsichtsmaßnahmen, um das Fußzeilen-Tag am Ende der Seite zu platzieren? Werfen wir einen Blick darauf.

Anforderungen: Manchmal, wenn der Seiteninhalt zu kurz ist, um die Höhe des Browsers zu unterstützen, Sie aber möchten, dass sich die Fußzeile am unteren Ende des Fensters befindet.

Idee: Die Mindesthöhe der übergeordneten Ebene der Fußzeile beträgt 100 %. Die Höhe der Fußzeile muss absolut unten sein (unten: 0). in der übergeordneten Ebene.

HTML-Code:

<!-- 父层 -->     
<div id="wapper">     
    <!-- 主要内容 -->     
    <div id="main-content">     
    </div>     
    <!-- 页脚 -->     
    <div id="footer">     
    </div>     
</div>

CSS lautet wie folgt:

#wapper{     
    position: relative;   /*重要！保证footer是相对于wapper位置绝对*/     
    height: auto;          /* 保证页面能撑开浏览器高度时显示正常*/     
    min-height: 100%  /* IE6不支持，IE6要单独配置*/     
}     
#footer{     
   position: absolute;  bottombottom: 0; /* 关键 */     
   left:0; /* IE下一定要记得 */     
   height: 60px;         /* footer的高度一定要是固定值*/     
}     
#main-content{     
   padding-bottom: 60px; /*重要！给footer预留的空间*/     
}

Zu diesem Zeitpunkt können andere Browser normal angezeigt werden, IE 6 muss jedoch separat verarbeitet werden :

<!--[if IE 6]->     
<style>     
#wapper{height:100%;} /* IE在高度不够时会自动撑开层*/     
</style>     
<![endif]-->

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie man mobile Webseiteninhalte adaptiv macht

Wie man mit Inhaltsüberlauf in Tabellentabellen umgeht

Was sind die Unterschiede zwischen iframe und Frame in HTML

Das obige ist der detaillierte Inhalt vonSo platzieren Sie das Fußzeilen-Tag am Ende der Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!