网页不满屏时，如何让footer固定在底部，网页满屏时，随高度走

最新推荐文章于 2024-03-02 16:11:17 发布

担架队队长

最新推荐文章于 2024-03-02 16:11:17 发布

阅读量2.6k

点赞数

分类专栏： frontEnd 文章标签： html css

frontEnd 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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 { height:100%; }
.wrap {
    height:auto; 
    min-height:100%; 
    _height:100%; 
    background:#CCC; 
    color:#fff; 
    font-size:18px; 
    text-align:center; 
}
.main { padding-bottom:80px; }
.footer { 
    position:relative; 
    height:80px; 
    line-height: 80px; 
    margin-top:-80px; 
    background:#333; 
    color:#fff; 
    font-size:16px; 
    text-align:center; 
}
</style>
</head>
<body>
<div class="wrap">
    <div class="main">
        <h1>七七事变祭</h1>
        <p>中华民族创辉煌，</p> 
        <p>倭寇菲佣心中慌。</p> 
        <p>为虎作伥傍老美，</p> 
        <p>东海南海滋事狂。</p> 
        <br />
        <p>历史潮流不可挡，</p> 
        <p>中华儿女当自强。</p> 
        <p>警钟长鸣记国耻，</p>
        <p>发展经济强国防。</p>
        <br />
        <p>七七事变77周年，勿忘国耻，振兴中华！！！</p>
        <br />   
    </div>
</div>
<div class="footer">
    <h1>页面高度不满，底部固定</h1>
</div>
</body>
</html>

担架队队长

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页不满屏时，如何让footer固定在底部，网页满屏时，随高度走

footer始终居于底部* { margin:0; padding:0; }body { font:14px/1.8 arial; }html, body, .wrap { height:100%; }.wrap { height:auto; min-height:100%; _height:100%; background:#CCC; c
复制链接

扫一扫