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

最新推荐文章于 2021-08-09 01:41:24 发布

weixin_33901843

最新推荐文章于 2021-08-09 01:41:24 发布

阅读量236

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xzma/p/7424681.html

版权

本文介绍了一种使用HTML和CSS实现的响应式网页布局方案，通过设置body为page-container并利用flex布局特性，实现了一个包含顶部导航、主要内容区及底部固定的页面结构。此方案适用于移动设备和不同屏幕尺寸。

摘要由CSDN通过智能技术生成

<!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>