有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来，如图：

有的同学可能会想用position:fixed;bottom:0;来永远居底。但有些场景确实不适合。

这是我从YII2中找到的简单解决方案

原理是将最外围的容器.warp 设置最小高度为100%，并且使用margin:0 auto -60px 将页脚吸上来。如图：

demo：主要看CSS部分

<html>

<head>

<meta charset="UTF-8">

<title>css - 紧贴底部的页脚</title>

<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

</head>

<style type="text/css">

    .wrap {

        min-height: 100%;

        height: auto;

        margin: 0 auto -60px;

        padding: 0 0 60px;

    }

    .footer {

    　　height: 60px;

   　　 background-color: #f5f5f5;

    　　border-top: 1px solid #ddd;

    　　padding-top: 20px;

    }

</style>

<body>

<div class="wrap">

    <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation">

    <div class="container">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span>

            <span class="icon-bar"></span></button><a class="navbar-brand" href="#">My Company</a>

        </div>

        <div id="w0-collapse" class="collapse navbar-collapse">

            <ul id="w1" class="navbar-nav navbar-right nav">

                <li class="active"><a href="#">Home</a></li>

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

                <li><a href="#">Login</a></li>

            </ul>

        </div>

    </div>

    </nav>

</div>

<footer class="footer">

<div class="container">

    <p class="pull-left">

        © My Company 2017

    </p>

    <p class="pull-right">

        Powered by <a href="#" rel="external">Yii Framework</a>

    </p>

</div>

</footer>

</body>

</html>

demo2: flex解决方案，将上面demo的css换成以下即可。

<style type="text/css">

body {

display: flex;

flex-flow: column;

min-height: 100vh;

}

.wrap { flex:; }

</style>

css - 紧贴底部的页脚的更多相关文章

  1. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  2. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  3. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  4. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  5. 005-CSS让页脚始终在底部不论页面内容多少

    让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部. 方案一: <!DOCTYPE html> <html> <head> <meta chars ...

  6. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  7. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  8. Sticky Footer (让页脚永远停靠在页面底部,而不是根据绝对位置)

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

  9. html 设置页脚div一直在页面底部

    先上代码 <!DOCTYPE HTML> <html lang="en" style="height: 100%; width: 100%;" ...

随机推荐

  1. HDU 3045 Picnic Cows

    $dp$,斜率优化. 设$dp[i]$表示$1$至$i$位置的最小费用,则$dp[i]=min(dp[j]+s[i]-s[j]-(i-j)*x[j+1])$,$dp[n]$为答案. 然后斜率优化就可以 ...

  2. 见微知著(二)：解析ctf中的pwn--怎么利用double free

    这次选2015年的0ctf的一道非常经典的pwn题,感觉这个题目作为练习题来理解堆还是很棒的. 运行起来,可以看出是一个实现类似于记事本功能的程序,就这一点而言,基本是套路了,功能都试一遍之后,就可以 ...

  3. 第3天-DIV+CSS布局

    盒子模型 margin 设置外边距宽度 有4个值的时候: maigin 10px 5px 15px 20px; (上.右.下.左)有3个值的时候: margin: 10px 5px 15px; (上. ...

  4. [BZOJ 4144] Petrol

    Link: BZOJ 4144 传送门 Solution: 一道不错的图论综合题 因为只询问关键点,因此重点是要求出关键点之间的最短路,以最短路建图 记$nst[i]$为离$i$最近的关键点:可以发现 ...

  5. JavaScript对JSON数据进行排序

    var ajson= { "result":[ { "cid":1, "name":"aaa", "price ...

  6. TDiocpCoderTcpServer返回数据记录有条数限制的问题

    TDiocpCoderTcpServer返回数据记录有条数限制的问题 在使用TDiocpCoderTcpServer控件返回查询数据的时候,发现当记录条数超过一定数量的时候(比方有人反试图返回30万条 ...

  7. 【java】乱码处理+编码转化+判断字符串编码方式

    之前有一篇是修改IDE的编码,服务器的编码等处理乱码,但是在所有环境因素上,保证了编码方式之后,也会有前台传递给后台[get方式提交]传递给后台的编码方式是非UTF-8的,也会有例如FTP服务器的编码 ...

  8. Oracle Service Bus Socket Adapter调整的参数

    之前在一个客户中做压力测试时候Oracle Service Bus性能大概达到900tps左右,和客户期望的1600tps有很大差距. 在研究了Socket Adapter的工作原理之后,判断可能是O ...

  9. iOS：iOS为什么要用-all_load、-ObjC、-force_load

    为了减少工作量复用部分代码,于是乎我们开始选择重构整个项目,把可以公用的代码放在一起打包成一个静态库导入到其他的项目中使用. 介绍这部分内容的文章在网上很多,各位可以Baidu一下细看. 但是每次在加 ...

  10. linux中查找文件属于那个软件包的方法

    一.linux中查找文件属于那个软件包的方法 [root@salt prod]# whereis htpasswdhtpasswd: /usr/bin/htpasswd /usr/share/man/ ...