先预览下效果吧
ok，上代码~
HTML:
CSS:
.demo-tab{
position:fixed;
bottom:41px;
overflow:hidden;/*主要*/
width:100%;
height:50px;/*主要*/
}
.demo-tab ul{
width:100%;
height:60px;/*主要*/
font-size:0;
background:#e8e8e8;
overflow-x:scroll;/*主要*/
overflow-y:hidden;/*主要*/
white-space:nowrap;
}
.item{
display:inline-block;
width:33.3333333%;
height:100%;
padding:10px 0;
font-size:18px;
background:#9c9c9c;
}
.item-on{
height:12px;
background:#04be02;
}
总结一下，其实就是外层的div的高度要比里层ul/div或者其它元素的高度小，然后overflow:hidden
这是目前已知的一种，也许还会有其它方法吧，希望这个方法能对dev有帮助。
美图，请欣赏，缩小尺寸了~