html实现手机显示效果,手机端分类页面的效果图实现

先谈谈这个问题怎么解决吧，一开始直接设定了leftBar的高度为100%，但发现没什么用。在老大的提示下，先设置了html、body等leftBar的父元素的高度为100%，再设leftBar的高度为100%，就解决了高度问题。

为实现在rightBar中滚动内容时，leftBar保持固定在屏幕左端，我把leftBar设了position:fixed; 因为leftBar高度为屏幕高度的100%，所以导致leftBar过长，会无故出现竖直方向上的滚动条，为解决这个问题，我设了整个板块2为position:absolute; top:0 ;    再调节leftBar和rightBar的padding-top为header的高度即可。(板块2我也设了float：left; 所以它能包住leftBar&rightBar)

但是又出现了一个问题，leftBar有部分覆盖在header上，这时，我就设了header为position:relative; z-index:100; 让header悬浮在leftBar上即可。

问题二：怎么使leftBar上的选中选项的右边没有边？

一开始我是设了每个选项的border-right，但发现这条边是一直延伸至下方的。

在老大的提示下，我直接设了leftBar的border-right，对于选中项用margin-right:-1px;就可以把边挡住，但我用的是margin-left:1px;不知道为什么一开始margin-right起作用，后来又不起作用(希望有人能解释下，O(∩_∩)O谢谢)。

三、rightBar部分

rightBar部分比较简单，为了方便，我直接用table来布局，比较整齐，同样rightBar也要设padding-top为header的高度，其它应该没什么问题。

JS切换模块部分比较简单，我就省略不讲了。

如果有人想探讨交流或要源码，可以留言，O(∩_∩)O谢谢

如有不足，请帮我指出。