网页不满屏幕高度时，footer始终在底部显示代码,Css代码库,德仔网

代码语言

代码分类

【Css】网页不满屏幕高度时，footer始终在底部显示

作者:擎宇 / 发布于2018/3/29/ 1058

我们在布局的时候有这样一种情况，就是当页面高度没有超过屏幕高度的时候，footer要固定到底部，而当页面超出满屏的高度的时候，footer要随着高度走。

<!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>
        中华民族创辉煌， 
        倭寇菲佣心中慌。 
        为虎作伥傍老美， 
        东海南海滋事狂。 
        
        历史潮流不可挡， 
        中华儿女当自强。 
        警钟长鸣记国耻，
        发展经济强国防。
        
        七七事变77周年，勿忘国耻，振兴中华！！！
           
    </div>
</div>
<div class="footer">
    <h1>页面高度不满，底部固定</h1>
</div>
</body>
</html>

试试其它关键字

同语言下

可能有用的

擎宇贡献的其它代码(8)