CSS 使用 vw 和左侧位置计算最大宽度
CSS calculate max-width using vw and left position
有没有一种方法可以使用视口宽度和元素的左侧位置来计算 CSS 中的最大宽度?我有一个包含动态 table 的 div,它可以根据上传的电子表格的列而增长。我希望能够为容器应用最大宽度和水平滚动,我可以使用 100vw
轻松实现。但是,我还有一个用户可以切换的侧边栏。所以我认为计算最大宽度的最佳方法是通过 100vw - [left position of container div]
或者也许任何人都可以使用纯粹的 CSS.
提出更好的解决方案
google了一下,好像不支持这个。
但是,我已经解决了我的问题,方法是在侧边栏切换时使用附加到正文的 class。考虑到侧边栏本身具有固定宽度,我做了这样的事情:
body{
div.horizontal-scroll {
max-width: calc(100vw - 310px);
}
&.sidebar-hidden {
div.horizontal-scroll {
max-width: calc(100vw - 80px);
}
}
}
有没有一种方法可以使用视口宽度和元素的左侧位置来计算 CSS 中的最大宽度?我有一个包含动态 table 的 div,它可以根据上传的电子表格的列而增长。我希望能够为容器应用最大宽度和水平滚动,我可以使用 100vw
轻松实现。但是,我还有一个用户可以切换的侧边栏。所以我认为计算最大宽度的最佳方法是通过 100vw - [left position of container div]
或者也许任何人都可以使用纯粹的 CSS.
google了一下,好像不支持这个。
但是,我已经解决了我的问题,方法是在侧边栏切换时使用附加到正文的 class。考虑到侧边栏本身具有固定宽度,我做了这样的事情:
body{
div.horizontal-scroll {
max-width: calc(100vw - 310px);
}
&.sidebar-hidden {
div.horizontal-scroll {
max-width: calc(100vw - 80px);
}
}
}