纯CSS，用flex布局实现：内容少时页脚在屏幕底部，内容多时页脚跟随在内容下面，附带永远固定在底部的导航栏

本文写于2020年1月14日。

前言：

主要面向手机屏幕设计前端页面，需求布局如下：

要实现以上布局，且不使用JS去控制DOM，就需要用到CSS中的flex布局（建议您也去把flex好好学一下）。

本文的实现方法只用纯正的HTML和CSS，不需要任何框架或组件。

实现：

直接上代码好了。

html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内容不长</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <section id="main">
            <h1>这里是主体内容，高度不一定</h1>
            <h2>高度不定</h2>
            <h3>其他内容</h3>
            <p>
                内容不多，balabala.....
            </p>
        </section>
	<!-- footer要显示在屏幕底部或紧跟在main之后 -->
        <footer>
            这里是footer<br/>
            高度不一定
        </footer>
	<!-- nav永远显示在屏幕底部最上层 -->
        <nav>
            <h3 class="active">
                <a href="test1.html">内容不长</a>
            </h3>
            <h3>
                <a href="test2.html">内容够长</a>
            </h3>
        </nav>
    </div>
</body>
</html>

CSS部分：

/* 对html和body关键是min-height: 100vh */
html,body {
    margin:0;
    min-height:100vh;
}
/* 这里是花哨 */
h1,h2,h3,h4,h5,h6,p {
    margin: 0;
    padding: 0;
}
#container {
    /* 对#container启用flex布局 *?
    display: flex;
    /* 用flex-direction定义主轴为纵轴，即垂直布局 */
    flex-direction: column;
    /* 最小高度同样为屏幕高度 */
    min-height:100vh;
    /* (其实这句可以不用）用space-between实现两端布局 */
    justify-content: space-between;
}
#main {
    background-color:bisque;
    /* flex:1;的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】 */
    /* （引自https://www.douban.com/note/717223803/） */
    flex:1;
}
/* footer栏不设置flex属性，所以它的高度只会随自身内容变化，不受页面其他因素影响 */
footer {
    background-color:cadetblue;
    padding: 10px;
    /* padding-bottom的值是为nav栏设置的，否则nav栏会挡住一部分内容 */
    padding-bottom: 40px;
}
/* nav栏的样式主要来向bootstrap中的fixed-bottom，背景色以下的内容为自行定义 */
nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: lightgreen;
    height: 30px;
    /* nav栏中的按钮们也用flex布局，水平向为默认值不用特别定义 */
    display: flex;
}
/* 下面的内容与本文主题无关，不说了 */
nav h3 {
    flex: 1;
    text-align: center;
    border:1px solid #ff00dd;
}
nav h3.active {
    background-color: #ffffff;
}

为了演示效果，我的目录结构如下：

style.css --- 样式

test1.html --- 页面内容不够高时的效果

test2.html --- 页面内容很高时的效果

效果：

总结：

遇到问题找百度（谷歌或者其他什么）是很多人都会去做的事，但是，别人家的结果真的不一定就适合自己。这次，我也是找了好长时间之后没有理想的结果，所以就索性直接去学习了一下flex布局，然后自己在项目之外单独做了这么一个测试，结果还就成了，所以，很多事情应该都没有我们原本想象的那么简单，同时也没有我们原本想象的那么不简单。

关于文中的内容，欢迎您随时与我交流。

感谢您的来访。

纯CSS，用flex布局实现：内容少时页脚在屏幕底部，内容多时页脚跟随在内容下面，附带永远固定在底部的导航栏

猜你喜欢