不用position:fixed实现固定元素的三种页面布局

作者: MJ 分类: html 发布时间: 2019-05-07 10:02

我们平时工作中经常会遇到position:fixed,固定顶部/固定底部/固定顶部和底部,然后中间滚动这样的布局,我们第一反应就是用fixed来实现,但是fixed在ios浏览器下经常会出现各种兼容性的问题,所以就产生了抛弃fixed,但是又可以实现固定元素的效果,于是就有了下边的三种形式(出处忘了),代码如下:

这仅仅是从布局上解决这种问题,其他比如弹窗之类的还是需要fixed,就另说,参考:ios兼容fixed

单独布局

<!DOCTYPE html>
<html>
<head>
    <title>布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <style type="text/css">
        *{margin:0;padding:0;font-size: 3vw;color: #fff;}
        .mean{
            height: auto;
            background: #095fb6;
            position: absolute;
            top: 0px;
            bottom:0px;
            left: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="mean"></div>
</body>
</html>

上固定下滚动

<!DOCTYPE html>
<html>
<head>
    <title>布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <style type="text/css">
        *{margin:0;padding:0;font-size: 3vw;color: #fff;}
        .top{
            height: 50px;
            background: #f00;
            position: relative;
        }
        .mean{
            height: auto;
            background: #095fb6;
            position: absolute;
            top: 50px;
            bottom:0px;
            left: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="top">我是文字</div>
    <div class="mean">
        <div style="height:2000px;"></div>
    </div>
</body>
</html>

上下固定,中间滚动

<!DOCTYPE html>
<html>
<head>
    <title>布局</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <style type="text/css">
        *{margin:0;padding:0;font-size: 2vw;color: #fff;}
        .top{
            height: 50px;
            background: #f00;
            position: relative;
        }
        .mean{
            height: auto;
            background: #095fb6;
            position: absolute;
            top: 50px;
            bottom:50px;
            left: 0;
            right: 0;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .bottom{
            height: 50px;
            background: #ccc;
            position: absolute;
            bottom: 0px;
            left: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
    <div class="top">我是文字</div>
    <div class="mean">
            <div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>0000</div>
    </div>
    <div class="bottom">我是文字</div>
</body>
</html>

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注