zoukankan      html  css  js  c++  java
  • 移动端布局规范-固定页头页尾-中间随高度滑动

    <!DOCTYPE html>
    <html>
    <head>
        <title>移动端上下固定中间滑动</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> 
        <style type="text/css">
            html,body{
                height: 100%;
            }
            body{
                margin: 0;
                padding: 0;
            }
            #container{
                display: flex;
                flex-direction:column;
                background: #f0debf; 
            }
            #container .setheader,#container .setFoorter{
                position: fixed;
                background: #0089ee;
                width: 100%;
                height: 3rem;
                line-height: 3rem;
            }
            #container .headernav,#container .footernav{
                text-align: center;
                font-size: 1.5rem;
                display: block;
                color: #fff;
            }
            #container .setheader{
                top: 0;
            }
            #container .setContain{
                flex: 1;
                overflow: scroll;
            }
            #container .itembox{
                font-size: 1.5rem;
            }
            #container .setFoorter{
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <!-- 整体框架 -->
        <div id="container">
            <!-- 固定头部 -->
            <header id="header" class="setheader">
                <div class="headernav">
                    头顶到天了
                </div>
            </header>
            <!-- 中间滑动 -->
            <section id="sectionbox" class="setContain">
                <div class="itembox">
                    <ul>
                        <li>我们不一样~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>努力吧!少年~~~~~~</li>
                        <li>有啥不一样!少年~~~~~~</li>
                    </ul>
                </div>
            </section>
            <!-- 固定页尾 -->
            <footer class="setFoorter">
                <div class="footernav">
                    底部导航
                </div>
            </footer>
        </div>
            <script type="text/javascript">
            <!-- 移动端使用rem响应不同屏幕布局 -->
            //通过window.screen.width获取屏幕的宽度
            var winWidth=window.screen.width / 30;
            document.getElementsByTagName('html')[0].style.fontSize=winWidth+'px';
            // 根据导航栏高度设置文本上下间距
            var headerHight = document.getElementById('header').offsetHeight;
            console.log('获取页头高度',headerHight);
            document.getElementById('sectionbox').style.paddingTop=headerHight/1.2+'px';
            document.getElementById('sectionbox').style.paddingBottom=headerHight/1.2+'px';
        </script>
    </body>
    </html>
  • 相关阅读:
    JSON.parse解决Unexpected token ' in JSON at position 1报错
    angularjs $scope与this的区别,controller as vm有何含义?
    angularjs link compile与controller的区别详解,了解angular生命周期
    理解Promise.all,Promise.all与Promise.race的区别,如何让Promise.all在rejected失败后依然返回resolved成功结果
    angularjs 一篇文章看懂自定义指令directive
    js 记录几个因惯性思维引发的代码BUG,开发思维方式的自我反省
    js forEach参数详解,forEach与for循环区别,forEach中如何删除数组元素
    angularjs ng-if妙用,ng-if解决父子组件异步传值
    JS 从内存空间谈到垃圾回收机制
    Markdown数学公式语法
  • 原文地址:https://www.cnblogs.com/longly/p/10847471.html
Copyright © 2011-2022 走看看