【问题标题】:CSS calculate max-width using vw and left positionCSS使用vw和左位置计算最大宽度
【发布时间】:2018-01-25 07:35:58
【问题描述】:

有没有办法使用视口宽度和元素的左侧位置来计算 CSS 中的最大宽度?我有一个包含动态表的 div,它可以根据上传的电子表格的列而增长。我希望能够为容器应用最大宽度和水平滚动,我可以使用100vw 轻松做到这一点。但是,我还有一个用户可以切换的侧边栏。所以我认为计算最大宽度的最佳方法是通过100vw - [left position of container div] 或者任何人都可以使用纯 CSS 提出更好的解决方案。

【问题讨论】:

    标签: css responsive calc


    【解决方案1】:

    谷歌搜索后,似乎不支持此功能。

    不过,我已经解决了我的问题,方法是在切换侧边栏时使用附加到正文的类。考虑到侧边栏本身的宽度是固定的,我做了这样的事情:

    body{
        div.horizontal-scroll {
            max-width: calc(100vw - 310px);
        }
        &.sidebar-hidden {
            div.horizontal-scroll {
                max-width: calc(100vw - 80px);
            }
        }
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-19
      • 2012-12-30
      • 2016-10-06
      • 1970-01-01
      • 2020-05-17
      • 2013-08-24
      相关资源
      最近更新 更多