前言
今天发现个问题,一个使用了position:fixed属性的元素,当它的内容超过屏幕高度的时候,超出的内容就看不到也无法滚动。。
就像下图这样:
解决
既然不滚动就加上overflow-y: scroll; overflow-x: hidden; 这些属性就好了,简单吧。。
But
但是发现右边展开收起的定位元素被隐藏掉了,以前只知道hidden会隐藏掉,没想到其它属性也会(孤陋寡闻了😅。。)
/* 默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;
/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;
/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;
/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;
/* 规定从父元素继承overflow属性的值 */
overflow: inherit;
表现如图(盗用MDN上的一张图):
So
怎么改呢,尝试了一些办法,左侧整个div元素且叫A(设置height:100%;),在A的内部添加一个div(且叫B),并在B元素加上overflow-y: scroll; overflow-x: hidden; height:100%;
这些属性,B元素与展开收起的元素(且叫C)并列,再根据原来的样式修改一下C元素的定位就好了。