android - 最小宽度在 HTML/CSS 中以纵向模式在 Android 屏幕上导致额外的垂直空间

标签 android html css

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

我使用 Bootstrap 框架

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%;

}
<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>

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

现在，请在 Android 设备纵向模式 中模拟它，你会看到在底部会出现一个额外的空间(高度更大但在 Chrome 的 Inspect Element 中不可见)滚动时的页面。

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

问题看我的录屏:http://i.imgur.com/Q0oAvT2.gif我使用带有 7"屏幕的 Nexus 7 平板电脑进行远程调试。

我做错了什么？

最佳答案

您希望它如何在小于 900 像素的屏幕尺寸上显示？ 您可以使用带有媒体查询的响应式 css 来处理，网上有很多示例。

例如，当屏幕尺寸为 600 到 900 像素时，它可以减小字体大小或更改 min-width(并可能增加 max-height)。您还可以将 900px 的 min-width 仅应用于较大的屏幕尺寸，而对其余屏幕尺寸使用 width:auto。

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

这可以通过将其添加到您的 CSS 文件中来完成:

body { overflow:scroll;}

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

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

关于android - 最小宽度在 HTML/CSS 中以纵向模式在 Android 屏幕上导致额外的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31563643/

上一篇：PHP:fwrite 在 foreach 循环中不起作用(由于图像链接？)

下一篇：html - 固定页脚中的 Div 溢出滚动

相关文章：

android - android 5.0( Lollipop )中的最近应用程序/历史记录使用哪个动画/ View ？

angularjs - 渲染没有页眉和页脚的 Angularjs 特定 View

javascript - 24 小时时间自动正则表达式

javascript - mousedrag 上的奇怪行为，javascript

css - 无法更改 header.php 中的样式表

css - 使用 CSS 假删除中断标签 <br>

android - 插页式 Admob 广告 : "IllegalStateException: Only fullscreen activities can request orientation"

java - 如何将 Firebase 与 Glide ('using' 方法集成)

java - 当有 if 语句时自定义 ListView 滞后

html - Django 如何在静态引用中连接字符串

©2024 IT工具网  联系我们