^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 当你决定出发,最难的就已经过去了
  • 以前我是很拒绝使用插件的,现在我却很喜欢,也许这是一种成熟
  • 网站内容如果对你有帮助,可以打赏支持下哦

网页不满屏幕高度时,footer始终在底部显示

阿里云服务器9.9

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

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

上面的代码实现了当内容不满一屏时,底部内容始终位于显示屏的底部;当内容超过一屏时,则位于内容底部。

如果本文章对你有帮助,请支持下我,谢谢!

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 大山
    什么原理呢,菜鸟搞不明白,哪位大神给解释下? :oops: :oops:
  2. 梦晴
    感谢博主分享~ 赞~ :wink: :wink:
  3. 哦哈哈笑话网
    博主加油,网站很漂亮
  4. BOKE123
    :wink: 这个功能还是挺不错的