『前端日志』用flex实现嵌套页面的顶部和底部固定，中间内容随窗口大小自动产生滚动条

最新推荐文章于 2023-11-24 23:56:10 发布

jshmsqt

最新推荐文章于 2023-11-24 23:56:10 发布

阅读量759

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/mad_house/article/details/105932039

版权

本来想用position:fixed来实现顶部底部固定。我用vh来指定内容高度，以适应窗口大小，而顶部和底部因为使用了图片做背景，他们的高度只能以px为单位，因此总是有误差无法消除。

然后借鉴了这篇文章：仿淘宝使用flex布局实现页面顶部和底部的固定布局

但是还有一个问题，我的页面除了顶部的navigation导航栏和底部的按钮栏以外，中间的内容部分还嵌套了一个tabs标签栏，因此仿照上面的例子多嵌套了一层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, user-scalable=no">
    <style>
        body,html{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-size: 14px;
        }

        header,
        footer {
            text-align: center;
            height: 50px;

最低0.47元/天解锁文章

jshmsqt

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
『前端日志』用flex实现嵌套页面的顶部和底部固定，中间内容随窗口大小自动产生滚动条

本来想用position:fixed来实现顶部底部固定。我用vh来指定内容高度，以适应窗口大小，而顶部和底部因为使用了图片做背景，他们的高度只能以px为单位，因此总是有误差无法消除。然后借鉴了这篇文章：仿淘宝使用flex布局实现页面顶部和底部的固定布局但是还有一个问题，我的页面除了顶部的navigation导航栏和底部的按钮栏以外，中间的内容部分还嵌套了一个tabs标签栏，因此仿照上面的例子多...
复制链接

扫一扫