主要面向手机屏幕设计前端页面，需求布局如下：
要实现以上布局，且不使用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>