Hello World!

 　　各位大牛好，前端弟中弟初入博客园，网后余生，请多包涵。

　　现阶段初入前端，已熟练掌握 css 布局，菜鸟一只，目前定位是一个垃圾切图仔。下阶段学习 js ，半只脚踏入程序员的大门。

仅以此篇文章做为开始告诫自己以后好好努力，为了充实精神生活，为了打败可笑的现实生活，不向命运低头。

　　分享一下除了利用 fixed 定位实现移动端 head 与 foot 固定的另外两种方法：

　　利用弹性盒：

　　大概思路是将整个 body 设置为 flex 弹性盒（切记一定要给 html 和 body 高度100%），然后将交叉轴方向设置为纵向排列，关键语句为  flex-direction: column;然后放三个盒子在 body 里，头部和底部分别设置好宽高（宽度视情况而定，高度一定要给），重点来了！！  给中间的盒子添加 flex-grow 属性值，让其占满 body 的剩余空间，达到撑开中间盒子的目的，使头尾固定。废话不多说，上代码：

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性布局移动端</title>
    <style>
        html,body{
            height: 100%;
        }
        .box{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .box .tou{
            height: 100px;
            background-color: aqua;
            /* 解决上下盒子自动缩放 */
            /* flex-shrink: 0; */
        }
        .box .wei{
            height: 100px;
            background-color: blueviolet;
            /* 解决上下盒子自动缩放 */
            /* flex-shrink: 0; */
        }
        .box .con{
            /* 自动填满剩余空间 (0-1) */
             flex-grow: 1;
             background-color: cadetblue;
             overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="tou">51646135</div>
        <div class="con">354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br><br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>354 <br>v  </div>
        <div class="wei">54541651</div>
    </div>
</body>
</html>

　　值得注意的是，中间内容的盒子在实际使用时一定要注意给 Y 轴添加  overflow-y: scroll;

 

　　利用绝对定位：

　　嘿嘿，既然说不让用 fixed 定位，没说不让用 absolute 绝对定位呀。。。大概思路是，将头部、中部和尾部放在一个盒子容器里(也可以直接放在 body 里，毕竟 body 就是一个大盒子呀呀)，给他们一“盒”一个 position: absolute 绝对定位，设置好宽高和 top ，bottom 属性值将头尾固定，需要注意的是中间的盒子设置 top 和 bottom 的属性值时要给头尾留好间距。上代码：

　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位移动端</title>
    <style>
        html,body{
            height: 100%;
        }
　　　　　元素 {
    position: relative;
    height: 100%;

        .box .tou{
            width: 100%;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 0;
        }
        .box .wei{
            width: 100%;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            bottom: 0;
        }
        .box .con{
            width: 100%;
            position: absolute;
            top: 100px;
            bottom: 100px;
            background-color: brown;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <div class="box cl">
        <div class="tou">我是头</div>
        <div class="con">12312323 <br>12312323 <br>12312323 <br>12312323 <br>12312323 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br><br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br><br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br>3 <br></div>
        <div class="wei">我是尾</div>
    </div>
</body>
</html>

 

 

 

　　

　　

　　

 

posted @ 2020-10-11 16:26  练习时长贰年  阅读(102)  评论(0)    收藏  举报