解决一个页面显示问题

 问题的由来

 这是个正常的页面本身是没什么问题的，当有的用户的分辨率如果低的话，那么问题出来了。

这个页面就变成这个样子

 这样看也没问题是吧如果我打开一个box 呢结果会是这样的：

 

 

 

 下面就会被遮住所以用户需要一个滚动条，将内容往下拉显示出来。当加入了滚动条之后。。

 

 

看似问题是解决了，但是新的问题又来了，在没加滚动条之前菜单是这样的弹出的

 

加入了滚动条之后页面弹出这个框出来没有任何反应，找了一下原因看了下网页结构大概是这样的我画图来表示

 他们的关系是A父类框，B是A的子类同时又是C的父节点，由于A 作为最外层加上滚动条之后那么弹出框C会被A所覆盖，我尝试了设置了z-index 属性然而依然不可能超越滚动条之上，经过百度多方面的提问超越父类滚动条的问题，查询结果是不可能的。既然不可能那么只能走其他的路子了。

由于这个设计需要有个类似滑动所以原生的不行那么就自己写一个吧。经过一阵调试好了滚动条做好了：

 看样子是没问题了，来测试一下，刚刚鼠标需要点选一个菜单栏的时候左边的菜单还没移动到就消失了这个是怎么回事？经过分析原来是这样的分析图：

 

 

 问题找到了那么继续改把,我把z-index 设置为999又把它的left靠近右侧ul 那么接下来的效果是这样的：

 

 

 

经过测试这个是没问题的上下左右都很OK，然后把代码提交到测试，正当觉得解决一个问题高兴的时候，测试说其他的功能模块不能点击选择了，说是我代码提交后出现的问题，纳尼？我自己去测试一下看看

 

 

他们说这个input 不能点选，说是加入我代码后出现的问题，我不由的咯噔一下，想了想之前在做滚动条的结构分析图：

 A是最外层大的框自增长的，B是和浏览器高度一致的框，C就是我们的内容的，因为做这个滚动条需要一个固定的框要和窗体一高高度的div，然后那这个框体的高度和外层的高度进行算法计算滚动条的高度，所以B 一定要在C框体的外层，那么和上个问题又有什么原因呢，原因就是overflow，当B的overflow设置为hidden的时候那么里面的E框就会被遮挡住说以我在设置B层的时候是这样的

 

 

 

这样就不会遮盖住了E框，那么后面的问题来了，我调试一下吧B框打印出来结果果然和我想的一样

 

 

车辆被B层的框遮挡住了，我当场就像把右边的内容的div的z-index 那么就会是这样的

 

FFFFFF….. ，那么我把E框的设置成最高级的z-index:999999,后面无论填写多少，始终没有右面的框高度高，这个是为什么呢。。。。，又经过仔细研究分析得出结论，上图：

 由于A 和F是同级的E框是A框的子集，A框和F平行，所以E框无论怎么设置高度是无法高于F框的，如果把A框设置高于F那么 B框也会覆盖F框，问题又回转了。烦字惹心头，我尝试将加入CSS hover 当鼠标在A 框的时候那么B框设置为440px 那么，E框就有足够空间可以展示出来了，挡用户移出A或者E框后B 框设置为210px 这样就不会挡住其他的页面了，既然想清楚方案，那么就开始干。经过一阵代码敲击写好了。。。。。但是我还是太年轻，没错，又出问题了。。。。。。上图：

 

 

 当经过A 后将B 设置为440px;原本是没问题的，问题在于，B继承与A，也就是当鼠标移出A的返回和E的返回在B的范围内，那么这个样式还是认为你在A的范围类，所以B 不会还原为210px;当鼠标移出B的范围 B才会设置为210px; 劳资要奔溃了，尼玛越做水越深。真是桃花潭水深千尺啊…..，既然CSS这条路不行，我试试JS 呢，利用js 的hover事件做了出来，抱着一点希望试了试：

 

 结果居然令人愉悦，问题完美解决了。回头看看这个需求，有点想笑，可能有时候看着很简单的事情往往坑就这在那里。