移动端头部固定出现的一些问题总结

首先移动端固定位置是为了防止下面内容过多出现滚动条的时候可以一直让头部固定位置不会出现随着滚动条滚动消失在上方

那么需要注意的几个问题是在写fixed的时候一些必要的属性一定要注意写上下面是我在编写过程中出现的bug：

移动端头部固定出现的一些问题总结

这是我最开始写的页面效果出来后也是可以的，我头部部分下面的一部分我写的是positon：relative 属性但是当我把下面的一个部分去掉之后会出现下面这种情况：

移动端头部固定出现的一些问题总结

经过检测把上面的上左右全部为0之后下面的position 换乘margin-top 就可以解决了这个问题

所以一些必要的属性必须要写上不然后期会出现一些不必要的问题以后要谨记！！

下面是我从网上搜到的一些关于头部和固定位置的不错的写法原文地址：http://caibaojian.com/mobile-position-fixed.html

很实用有需要的可以看一下：

<body class="layout-fixed">
    <header>
    <!-- fixed定位的头部 -->
    </header>
    
    <!-- 下面是可以滚动的区域 -->
    <main>
        <!-- 内容在这里... -->
    </main>
    
    <!-- fixed定位的底部 -->
    <footer>
        <input type="text" placeholder="Footer..."/>
        <button class="submit">提交</button>
    </footer>
</body>

header, footer, main {
    display: block;
}

header {
    position: fixed;
    height: 50px;
    left: 0;
    right: 0;
    top: 0;
}

footer {
    position: fixed;
    height: 34px;
    left: 0;
    right: 0;
    bottom: 0;
}

main {
    /* main绝对定位，进行内部滚动 */
    position: absolute;
    top: 50px;
    bottom: 34px;
    /* 使之可以滚动 */
    overflow-y: scroll;
    /* 增加该属性，可以增加弹性 */
    -webkit-overflow-scrolling: touch;
}

main .content {
    height: 2000px;
}

移动端头部固定出现的一些问题总结

相关推荐