CSS scroll在移动设备上无法正常显示

我的代码位于本文末尾，控制着我的页面<div>在jQuery Mobile中的<div>。我有这个div做表滚动，因为它在页面上水平溢出。然而，它表现为在这个截图，：当它被垂直取向发生CSS scroll在移动设备上无法正常显示

Table fills ~50% of the page, then scrolls

这个同样的问题，但这种观点说明它更好。为了更好地说明两个边界，我也侧身滚动了div。我希望div在移动设备上简单地填充页面的整个宽度，因为它可以在大屏幕上正确显示，但如果它溢出，我希望它水平滚动。我已经尝试了overflow: scroll;和overflow: auto;，此外还尝试使用代码-webkit-overflow-scrolling: touch;。我没有尝试过设置宽度的方法，但其他方法均已运行，包括width: 100%;和position: absolute; left: 0; right: 0;。

CSS：

@media only screen and (min-width: 1025px){ 
    .ui-page { 
    width: 960px !important; 
    margin: 0 auto !important; 
    position: relative !important; 
     border-right: 5px #111111 outset !important; 
     border-left: 5px #111111 outset !important; 
     border-bottom: none; 
    } 
} 

@media only screen and (max-width: 1024px){ 
    .tblscroll { 
     width: 100%; 
     overflow: scroll; 
     -webkit-overflow-scrolling: touch; 
    } 
}

简体HTML：

<div data-role="page" id="resultsmain" data-title="Survey Results"> 
    <div data-role="header"><h1>Title</h1></div> 
    <div data-role="content">text 
     <div class="tblscroll"> 
      <table> 
       ...table information... 
      </table> 
     </div> 
    </div> 
</div>

来源

2013-03-19 vaindil

发布一些代码的页面结构。 – Omar 2013-03-19 15:10:38

@Omar我已经更新了，对不起。 – vaindil 2013-03-19 15:14:24

没关系。在你的情况下，我推荐使用'ui-grid'。检查这个http://jquerymobile.com/demos/1.2.0/docs/content/content-grids.html – Omar 2013-03-19 15:21:23

你可以尝试使用在你的div元素一个CSS显示块宽度定义的宽度的调整百分比。

来源

2013-03-19 14:58:18 blackhawk

看起来好像它的表本身就是问题所在。

我将在表宽度设置为100％，并修复不会增长或收缩

表行{宽度：100％; }

来源

2013-03-19 15:04:40 advermark

不幸的是没有工作。我尝试过使用CSS和HTML方法将'width'设置为'100％'，但都没有解决问题。 – vaindil 2013-03-19 15:07:26

这并没有真正的帮助，但我今天加载它，它完美的工作。我从昨天到今天都没有改变，所以它一定是某种缓存问题（尽管我已经清除了我的移动缓存）。

来源

2013-03-20 17:45:45 vaindil

CSS scroll在移动设备上无法正常显示

回答

相关问题