首页 > 代码库 > css - 紧贴底部的页脚

css - 紧贴底部的页脚

2024-09-02 08:34:38   218人阅读

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

技术分享

有的同学可能会想用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>

 

css - 紧贴底部的页脚


联系
我们