如何设计一个页面的底部导航？

Question

最近遇到一个需求，做一个有底部导航的页面，页面上的内容要求一屏展示（尽量不要有滚动），同时还要兼容1366768 、1440900、1920*1080这些屏幕，能不能用代码来实现呢？
首先底部的导航栏只要将顶部的导航栏用定位定在页面的底部就可以了。（导航栏可以再菜鸟联盟中查到*各种的都有）

然后，兼容1366768 、1440900、1920*1080这些屏幕的话一般就是写媒体查询用三个节点就可以了
媒体查询的具体代码为：

        @media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
            .body{
                background: #000;
            }/*这里是样式*/
        }
        @media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
            .body{
                background: #000;
            }/*这里是样式*/
        }
        @media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
            .body{
                background: #000;
            }/*这里是样式*/
        }

Answer 1

position:fixed

Answer 2

这个就是一个div固定在底部的问题

这个关键的css知识点在于position:fixed

https://blog.csdn.net/lanmanc...
https://www.cnblogs.com/Rinpe...

Answer 3

    首先底部的导航栏将顶部的用相对定位position:fixed;定位在页面的底部就可以了。导航栏可以到菜鸟联盟查到*各种的都有
    其次是要兼容1366768 、1440900、1920*1080这些屏幕一般使用媒体查询
    具体代码如下：
    @media screen and (min-width: 1000px) and (max-width:1367px){/*兼容1366*768*/
        .body{
            background: #000;
        }/*这里是样式*/
    }
    @media screen and (min-width: 1367px) and (max-width:1441px){/*兼容1440*900*/
        .body{
            background: #000;
        }/*这里是样式*/
    }
    @media screen and (min-width: 1441px) and (max-width:1920px){/*兼容1920*1080*/
        .body{
            background: #000;
        }/*这里是样式*/
    }

Answer 4

【CSS】固定在底部的页脚

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            margin: 0;
        }
        main {
            flex: 1;
        }
        header { text-align: center; height: 3em; }
        main, footer {
            display: block;
            padding: .5em calc(50% - 400px);
        }
        footer {
            background: linear-gradient(#222, #444);
            color: white;
        }