zoukankan      html  css  js  c++  java
  • css

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

    有的同学可能会想用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: 1; }
    </style>
  • 相关阅读:
    VS2008中应用.NET 4.0中的代码契约
    生日快乐
    Did you know…How to maintain scrollposition after post back? z
    微软正式发布SQL Server 2008
    想要注册一个写日记用的博客(选好了)
    SCOPE_IDENTITY、IDENT_CURRENT 和 @@IDENTITY的区别(比较) z
    Microsoft Visual Studio 2010 and the .NET Framework 4.0 CTP下载
    mysql
    如何用iframe代码显示调用网页的指定部分
    文件夹权限
  • 原文地址:https://www.cnblogs.com/CyLee/p/6348887.html
Copyright © 2011-2022 走看看