固比固布局圣杯布局 css实现传统手机app布局

最新推荐文章于 2022-04-26 18:11:43 发布

weixin_34077371

最新推荐文章于 2022-04-26 18:11:43 发布

阅读量167

点赞数

原文链接：http://www.cnblogs.com/wangzhichao/p/8532497.html

版权

手机app的布局大致上都是头部、内容、底部三部分；

我们需要实现的是头部、底部高度固定；中间内容区域自适应且可以滚动；直接贴代码；

css：

html,body {
        width: 100%;
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    section {
        flex: 1;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    header {
        background: indianred;
        width: 100%;
        height: 50px;
    }
    footer {
        background: indigo;
        width: 100%;
        height: 50px;
    }
    p {
        height: 50px;
        width: 100%;
    }

html：

<body>
    <header>头部</header>
    <section>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
        <p>这是可以滚动的</p>
    </section>
    <footer>底部</footer>
</body>

效果图：

转载于:https://www.cnblogs.com/wangzhichao/p/8532497.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34077371

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固比固布局圣杯布局 css实现传统手机app布局

手机app的布局大致上都是头部、内容、底部三部分；我们需要实现的是头部、底部高度固定；中间内容区域自适应且可以滚动；直接贴代码；css：html,body { width: 100%; height: 100%; } body { margin: 0; padding: 0; ...
复制链接

扫一扫