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>
  • 相关阅读:
    STM32F407Discovery开发板使用环境搭建
    NIO初识
    Mac下Boost环境搭建
    Android Studio增加NDK代码编译支持--Mac环境
    LNMP平台搭建---PHP安装篇
    LNMP平台搭建---MySQL安装篇
    支付系统流程
    从html字符串中获取div内容---jquery
    记一次进入新公司快速融入开发团队经历
    DataTable复制自身行
  • 原文地址:https://www.cnblogs.com/CyLee/p/6348887.html
Copyright © 2011-2022 走看看