CSS使用vw和左侧位置计算最大宽度

时间:2017-08-17 02:35:36

标签: css responsive calc

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

1 个答案:

答案 0 :(得分:2)

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

但是,通过在切换侧边栏时使用附加到正文的类,我已经解决了我的问题。考虑到侧边栏本身有一个固定的宽度,我做了类似的事情:

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