Heim > Web-Frontend > CSS-Tutorial > So reparieren Sie den unteren Rand der Fußzeile

So reparieren Sie den unteren Rand der Fußzeile

一个新手
Freigeben: 2017-09-20 10:27:39
Original
4341 Leute haben es durchsucht


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

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!

Verwandte Etiketten:
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