Rumah > Artikel > hujung hadapan web > footer固定底部的方法

footer固定底部的方法

一个新手asal: 2017-09-20 10:27:394210semak imbas

<!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>

Atas ialah kandungan terperinci footer固定底部的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：比较CSS3选择器:nth-child和:nth-of-type之间的区别Artikel seterusnya：css+div典型布局基本框架

Artikel berkaitan

Lihat lagi