問題描述：圖1.1是微信開發的一個頁面，頂部有一個下拉選擇選單(自己寫的元件)用於選擇日期，選擇之後會出現該日期下的資料記錄，這時一個頁面會出現兩條滾動條(因為滾動條太醜，我用::-webkit-scrollbar {width: 0px;}將滾動條隱藏了，這裡用紅色線條標註出來)，蘋果不會出現問題，安卓就會出現滾動不了下拉選單的情況，一滾下拉選單，整個頁面都滾起來了。 圖1.1     按道理來說應該不會出現這樣的情況，因為如圖1.2，下拉選單內容區域已經是區域性滾動，而且由於下拉選單內容區域z-index ：2，跟記錄內容區域根本不在同一個平面， 但安卓機確實滾動不了下拉選單的內容。為此，我覺得唯有將摒棄本來的瀏覽器滾動條，使用區域性滾動條來解決。使兩個區域的滾動條徹底分離開來。
圖1.2        做法一：其實這個想法實現起來很簡單，首先幹掉瀏覽器的滾動條，然後為記錄的內容區域加上一個滾動條。        ①幹掉瀏覽器滾動條：html{ overflow:hidden; }        ②為記錄內容區域加上滾動條：.list-record{ height:xx ; overflow:auto }        做法很簡單，但是蛋疼就蛋疼在，上面紅色的height:xx 這個高度究竟是多少才合適？手機各種各樣的尺寸，怎麼樣才能一勞永逸搞定全部機子呢？我是新手，第一時間只能想到用百分比高度，那就來試一下，設定hegiht:100% 發現竟然滾不了……換個確定的高度試試，這裡用了IPHONE5的尺寸，所以高度試下568px，這下能動了……但即使是這樣，記錄會有顯示不全的問題，見圖1.3紅色部分
圖1.3        做法二：現在的問題就是，怎樣控制這個內容區域高度的問題。來想想還有什麼可以控制這個高度。要不試下用定位的拉伸特性？        ①在內容區域設定 .list-record{ position:absolute;top:57px;bottom:0;right:0;left:0 }        由於內容區域上面有一個下拉選擇選單，所以要top:57px一下，避免他們重疊在一起。這下好了，用了拉伸特性，什麼尺寸的手機都可以滿屏拉伸，而且記錄內容也可以顯示完全。        至此，就將下拉選單跟記錄列表區域分開成兩個區域，分別使用各自的滾動條，大家都不會妨礙對方滾動，可以收工啦。