最小宽度会在HTML / CSS中以纵向模式在Android屏幕上垂直显示额外空间

时间：2015-07-22 12:49:31

标签： android html css

最近，在使用以下HTML代码和CSS代码时，我遇到了Android Chrome浏览器的问题，仅在纵向模式下（横向看起来很好）。

我使用bootstrap框架

＆＃13;
＆＃13; 
body {

  min-width: 900px;

}

#test div {

  max-height: 400px;

  overflow: auto;

}

#test table {

  margin-bottom: 0;

}

#test table tr td {

  width: 25%;

  padding-right: 5px;

}

#test table tr th {

  width: 25%;

}
＆＃13; 
<div class="col-xs-12 col-sm-10 col-sm-offset-1" id="test">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Name</th>
        <th>Size</th>
        <th>Modification</th>
        <th>Action</th>
      </tr>
    </thead>
  </table>

  <div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
        <tr>
          <td>sdad asdadsasdas</td>
          <td>asdasdasdasd</td>
          <td>asdasd asd asd</td>
          <td>adsasd adsasdasd</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="clearfix"></div>
＆＃13;
＆＃13;
＆＃13;

或者更好，一个jsfiddle文档：http://jsfiddle.net/32Lg9ddf/

现在，请在 Android设备中以纵向模式进行模拟，然后您会看到这将显示一个额外的空间（高度更大但在Chrome中的Inspect Element中不可见）滚动时的页面底部。

这很奇怪，因为在iOS和Windows Phone的其他设备上，它看起来非常好，并且没有显示额外的空间（或更大的高度）。

请参阅我的屏幕录制以查看问题：http://i.imgur.com/Q0oAvT2.gif我使用Nexus 7平板电脑进行远程调试，使用7＆＃34;屏幕。

我做错了什么？

2 个答案:

答案 0 :(得分：1)

您希望它在900px以下的小屏幕尺寸上显示？ 您可以使用具有媒体查询的响应式CSS来处理这一问题，在线有很多示例。

例如，当屏幕尺寸为600到900px时，它可以减小字体大小或改变min-width（并可能增加最大高度）。您也可以仅将min-width 900px应用于较大的屏幕尺寸，并使用width:auto来完成剩下的工作。

在CSS中将overflow属性设置为'scroll'将显示水平滚动条而不是下方的额外空间，但仅限于使用的屏幕尺寸太小时。 overflow设置为隐藏将删除任何不适合的东西，而不会在下面留下额外的空间（如果数据是固定的并且总是适合你可以使用它或减小最小宽度大小）。

可以将此添加到CSS文件：

body { overflow:scroll;}

这将水平和/或垂直滚动​​。或者，您可以将其应用于table标记。

响应式HTML示例，包括 bootstrap ，这是最适合您处理此问题的工具。 http://www.w3schools.com/html/html_responsive.asp

答案 1 :(得分：-1)

从min-width:900px;规则中删除body，以便可以针对关联正确缩小范围。

我也很想从max-height: 400px;

中移除#test div

如果您专门为这些平台构建桌面并且桌面不用担心，我会考虑在内容允许的情况下使用Flex或column-count而不是html表格。< / p>

相关问题
最新问题