解决使用MUI时mui-slider-item高度不一致的自适应问题

今天在写一个MUI项目的时候，发现使用slider时，最高的mui-slider-item会把mui-slider-group撑开，而其他的mui-slider-item下面会出现很大的空白。

百度了好久也没有找到解决方案，最后自己想出了一种办法，希望起到抛砖引玉的作用。

解决思路：

 

 用一个新的container把mui-slider-item嵌套在里面,高度设置为当前设备的高度，然后给container设置overflow:scroll。

这样就不会撑开mui-silder-group的高度，同时里面的内容也可以看到了。

一个极其朴素的demo在下面

<div id="slider" class="mui-slider">
		        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		            <a class="mui-control-item" href="#item1">aaa</a>
			    <a class="mui-control-item" href="#item2">bbb</a>
		            <a class="mui-control-item" href="#item3">ccc</a>
		        </div>
		        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
		        <div class="mui-slider-group">
		            <div id="item1" class="mui-slider-item mui-control-content mui-active">
				<div class="container" style="overflow: scroll;">
				　　1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
				</div>
		            </div>
				<div id="item2" class="mui-slider-item mui-control-content mui-active">
				　　<div class="container" style="overflow: scroll;">
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>3<br/>1111111<br/>
				　　</div>
				</div>
		            　　<div id="item3" class="mui-slider-item mui-control-content">
				　　<div class="container" style="overflow: scroll;">
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
					1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>1111111<br/>
				　　</div>
		            </div>
		        </div>
		    </div>
		<script type="text/javascript">
			mui.init();
			var h = window.innerHeight;
			h = h-40 ;
			console.log(h);
			var item = document.getElementsByClassName('container');
			for(i=0;i<item.length;i++){
				item[i].style.height = h + 'px';
			}
		</script>