关于position:fixed和display:table-cell的hack用法

最新推荐文章于 2023-01-28 10:32:30 发布

Egoist樱满集

最新推荐文章于 2023-01-28 10:32:30 发布

阅读量1.7k

点赞数 3

分类专栏：前端css 文章标签： css随笔

本文链接：https://blog.csdn.net/zhufeng19900713/article/details/79140640

版权

前端css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言：
之前在项目中，经常会遇到左侧的侧边栏能自由伸缩，右边的内容区域能伴随着左边侧边栏的伸缩自由填满宽度，假设右边的内容区域有一个宽度填满右边区域，并且需要固定悬浮在右边区域的底部，如下图

一般情况下，要想保证右下角的悬浮区域宽度填满右边区域，并且可以在左边区域伸缩、屏幕伸缩的情况下做自适应，必然要通过js来实现，并且监听浏览器window的resize事件来动态的对其宽度做处理，这几天无意中发现一个方法可以通过纯css的方式来解决这个问题，代码如下；

<!DOCTYPE html>
<html>

    <head>
        <title>fixed-table</title>
        <style type="text/css">
        html,
        body {
            margin: 0;
        }
        .left{
            width: 20%;
            height: 100%;
            background-color: yellow;
            position: fixed;
        }
        .right {
            /*position: relative;*/
            width: 80%;
            height: 1800px;
            float: right;
            background-color: #aaa;
        }

        .pagination {
            border: 1px solid red;
            position: fixed;
            bottom: 0;
            background-color: blue;
            color: #fff;
        }

        .pagination_inner {
            display: table-cell;
            width: 1%;
        }

        .pagination button {
            background-color: #eee;
            width: 100px;
            height: 50px;
            border: 1px solid #000;
        }

        </style>
    </head>

    <body>
        <div class='left'>
            <h1>左边区域</h1>
        </div>
        <div class='right'>
            <h1>右边区域</h1>
            <div class='pagination'>
                <div class='pagination_inner'>
                    <h1>悬浮区域</h1>
                </div>
            </div>
        </div>
    </body>

</html>

我们可以通过实例看到设置步骤如下：
1. 给div.pagination（即右下角悬浮块）设置position:fixed;bottom:0;
2. 给div.pagination_inner（即悬浮快内层）设置display:table-cell;width: 1%;
图例如下：
这里写图片描述

兼容性这块的话，我做了相关测试，chrome和firefox都支持，ie兼容到8，兼容性还是棒棒哒~~

这样就满足了我们的需求啦，这只是一个思路，这个布局个人觉得可以适用于很多场景，比如说悬浮在底部的分页，顶部的navbar等等~简单分享下~顺便自己mark一下下哈哈

Egoist樱满集

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
关于position:fixed和display:table-cell的hack用法

前言：之前在项目中，经常会遇到左侧的侧边栏能自由伸缩，右边的内容区域能伴随着左边侧边栏的伸缩自由填满宽度，假设右边的内容区域有一个宽度填满右边区域，并且需要固定悬浮在右边区域的底部，如下图一般情况下，要想保证右下角的悬浮区域宽度填满右边区域，并且可以在左边区域伸缩、屏幕伸缩的情况下做自适应，必然要通过js来实现，并且监听浏览器window的resize事件来动态的对其宽度做处理，这几天
复制链接

扫一扫

专栏目录