您的位置：首页 > 移动开发

移动端的垂直布局

2018-03-20 13:36 127 查看 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}

body {
font: 12px/1.5 "\5FAE\8F6F\96C5\9ED1", arial;
*line-height: 1.5;
}

html,
body {
height: 100%;
}

.wrap {
display: -webkit-box;
-webkit-box-orient: vertical;
background: #ffffff;
overflow: hidden;
width: 100%;
height: 100%;
}

header {
width: 100%;
height: 44px;
background: #45c8a6;
display: block;
}

section {
-webkit-box-flex: 1;
overflow-x: auto;
background: red;
}

footer {
width: 100%;
height: 50px;
background: blue;
display: -webkit-box;
-webkit-box-orient: horizontal;
text-align: center;
color: #959595;
border-top: 1px #d9d9d9 solid;
}
</style>
<title>移动端的垂直布局</title>
</head>

<body>
<div class="wrap">
<header> header </header>
<section> content </section>
<footer> footer </footer>
</div>
</body>

</html>


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航