html – CSS Calc:使用百分比时错误的值?
发布时间:2020-12-14 22:40:59 所属栏目:资源 来源:网络整理
导读:我有一个问题,CSS calc返回%的错误值. 我的想法是创建一个粘性侧边栏,首先滚动到最后,然后它一直保持到内容结束.它适用于vh单位,当我使用div的绝对高度时,但是当我使用%时. .sidebar {position: sticky;top: calc(100vh - 100%); 所以也许我误解了%在这个
我有一个问题,CSS calc返回%的错误值. 我的想法是创建一个粘性侧边栏,首先滚动到最后,然后它一直保持到内容结束.它适用于vh单位,当我使用div的绝对高度时,但是当我使用%时.
所以也许我误解了%在这个上下文中意味着什么(我的理解:应用类.sidebar的对象的高度)或者calc()只是不好用? 编辑: 这是我的意图(黄色:视口;侧边栏:蓝色;红色:内容).边栏滚动,直到它的底边和视口位于相同的高度,然后只有内容移动,之后侧边栏和内容的底线在同一级别上. 它实际上适用于固定值. 似乎答案不是使用父级高度,因为这会导致更大的值,导致侧边栏底线比视口底部更高,但实际上更低. 感谢,并有一个愉快的一天! 最佳答案
%是包含它的元素大小的百分比.因此,如果您的页面很长,它可能远远超过视口的大小,因此100vh – 100%将变为负数.这意味着侧边栏将延伸到视口顶部.如果您打算将侧边栏固定在页面顶部,您也可以放置
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |