flex/fixed上中下（移动端）

最新推荐文章于 2024-06-02 17:14:20 发布

昔冰_G

最新推荐文章于 2024-06-02 17:14:20 发布

阅读量504

点赞数

分类专栏：前端标签属性基础

本文链接：https://blog.csdn.net/qq_38800316/article/details/125229723

版权

css3 css html

前端标签属性基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方案一：不使用fixed

html{
    height:100vh;
    /* 如果这里不给100%，那就会认为自动，那底部栏就跑到最下面了（视口外） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
       为方便计算所以设定font-size为100px，也就是26.667vw 
       为了实现跟随屏幕改变，所以这里用的vw基准，而不是固定的px
    */
}
body{
    width:100%;
    height:100%;
    /* 如果这里不给100%（父高100%），那就会认为自动，那底部栏就跑到最下面了（视口外） */
    display: flex;
    font-size: 0.16rem;
    flex-direction: column;
}
header{
    height:.67rem;
    /* 测得67px就是 67/(html的font-size)=67/100=0.67rem */
}
main{
    flex:1;
    overflow:auto;
}
footer{
    height:.5rem;
}

方案二：使用fixed

html{
    height:100vh;
    /* 如果这里不给100%，那就会认为自动，那底部栏就跑到最下面了（视口外） */
    font-size:26.667vw;
    /* 
       100vw=375px    1px=0.26667vw    
       为方便计算所以设定font-size为100px，也就是26.667vw 
       为了实现跟随屏幕改变，所以这里用的vw基准，而不是固定的px
    */
}
body{
    width:100%;
    height:100%;
    /* 如果这里不给100%（父高100%），那就会认为自动，那底部栏就跑到最下面了（视口外） */
    font-size: 0.16rem;
}
header{
    height:.67rem;
    /* 测得67px就是 67/(html的font-size)=67/100=0.67rem */
    positon:fixed;
    left:0;
    bottom:0;
}
main{
    overflow:auto;
    padding-top:0.67rem;
    /* 由于header固定了，脱离文档流，所以这里往下挤一下才能显示main的原被header遮掩的部分内容 */
    padding-bottom:.5rem;
    /* 对应footer的高度，避免被底部遮掩，向上挤一下 */
}
footer{
    height:.5rem;
    positon:fixed;
    left:0;
    bottom:0;
}