移动网页 ----仿淘宝使用flex布局实现页面 固定顶部和底部 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <link rel="stylesheet" type="text/css" href="flexible.css"/>
        <title></title>
        <script src="lib-flexible.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .page-container {
              display: -webkit-flex;
              display: flex;
              min-height: 100vh;/*1vh表示浏览器高度的1%，100vh为浏览器高度，感觉这个挺好的*/
              /* min-height: 100%;另一种写法 */
              flex-direction: column;
            }
            header,footer {
                width: 100%;
                height: 1rem;
                background: rgba(0,0,0,.5);
            }
            .content {
                flex: 1;
                background: red;
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;
            }
            .xx {
                height: 100rem;
            }
        </style>
    </head>

    <body class="page-container">
            <!--顶部固定导航-->
            <header class="header"></header>
            
            
            <!--内容区域-->
            <div class="content">
                <div class="xx">asdasdasdsa</div>
            </div>
            
            <!--底部固定-->
            <footer class="footer"></footer>
        
    </body>

</html>

 

posted @ 2017-08-24 18:22  吾生有涯，而知无涯！  阅读(698)  评论(0)  编辑  收藏  举报