zoukankan      html  css  js  c++  java

  • 移动端 顶部、底部和内容之间的小技巧 用flex布局来解决

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Document</title>
	<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body, .wrap {
  height: 100%;
}
.wrap {
  -webkit-overflow-scrolling: touch;
/*   padding-top: 44px;
  padding-bottom: 44px; */
  overflow-y:scroll; 
}
.fixed{
  position: fixed;
  left: 0;
  right: 0;
  height: 44px;
  line-height: 44px;
}

.top {
  top: 0;
  z-index: 960;
  background: red
}
.top p{
	text-align: center;
}
.bottom {
  bottom: 0;
  z-index: 940;
  background: blue
}
/* .top ~ .wrap 的兄弟元素 如何没有找到则不加padding */
.top ~ .wrap{
  padding-top:44px;
}
/* .bottom ~ .wrap 的兄弟元素 */
.bottom ~ .wrap{
  padding-bottom:44px;
}
	</style>
</head>
<body>
	<!-- 移动端的常见布局
     1：通常都是上中下3块布局
        一般来说都是header和footer部分固定，中间的内容滚动。
     -->
     <header class="fixed top">
       <p>主球圈</p>
     </header>
     <footer class="fixed bottom">
      我是底部
     </footer>
     <section class="wrap">
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     	<div style="">我是中间的</div>
     </section>
     
     <!--以上有什么问题？假如有些页面没有底部列-->
</body>

    　　

    用flex来解决

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin:0;
        padding:0;
    }
    html,body{
        height:100%;
    }
    .box{
        display:flex;
        flex-direction:column;
    }
    header{
        height:44px;
        background-color:red;
    }
    section{
        flex:1;
    }
    footer{
        height:44px;
        background-color:blue;
    }
    </style>
</head>
<body>
    <div class="box">
        <header>123</header>
        <section>
             <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
              <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
              <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
            <p>这是第一段文字</p>
            <p>这是第二段文字</p>
            <p>这是第三段文字</p>
            <p>这是第四段文字</p>
        </section>
        <footer>213</footer>
    </div>
</body>
</html>

    　　

    flex基本布局

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{ margin:0; padding:0; }
		html,body{ height:100%; 100%; }
		.cont{
			display: -webkit-flex;
			display: flex;
			100%;
			height:100%;
			flex-direction:column;

		}
		header{ 100%; height:50px;  background-color:blue;}
		section{ 100%; flex:1; background-color:red; }
		footer{ 100%; height:50px; background-color:yellow; }
	</style>
</head>
<body>
	<div class="cont">
		<header></header>
		<section></section>
		<footer></footer>
	</div>
</body>
</html>

    　　
  • 相关阅读:
    P3704 [SDOI2017]数字表格
    CF 700 E. Cool Slogans
    杜教筛学习笔记
    [BOI2004]Sequence 数字序列（左偏树）
    [WC2007]剪刀石头布（最大流）
    [NOI2009]变换序列（二分图匹配）
    文理分科（最小割）
    上帝与集合的正确用法（欧拉定理）
    [HAOI2008]圆上的整点（数论）
    主席树学习笔记
  • 原文地址：https://www.cnblogs.com/mingjixiaohui/p/5436272.html
Copyright © 2011-2022 走看看