Question

我正在开发一个使用OSM / Google Maps集成测量和存储跑步/自行车赛道的应用程序。

我希望它在没有任何页面滚动的情况下工作，因此页面应该填满浏览器窗口。基本上它应该如下所示：

+---------------------------------+
|     Toolbar with some buttons   |
+---------+-----------------------+
| Long   ^|                       |
| list   ||                       |
| of     ||                       |
| routes v|        Filled         |
+---------+         with          |
| Route   |        Google         |
| statis- |         Map           |
| tics    |                       |
+---------------------------------+

路由列表很长，应该强制显示滚动条。工具栏和路径统计信息应缩小到所需的最小空间。我当前的HTML测试文件是：

<html>
    <body style="width: 100%; height: 100%; border: 0; margin: 0">
        <div style="height: 100%; max-height: 100%; border: 4px solid gray">
            <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue">
                <tr style="height: 30px">
                    <td colspan="2">
                        <div style="border: 2px solid red">Toolbar</div>
                    </td>
                </tr>

                <tr>
                    <td style="width: 300px; border: 2px dashed orange; overflow: scroll">
                        <!-- long list for testing -->
                        left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                        left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
                    </td>
                    <td rowspan="2" style="border: 2px dashed yellow">
                        map
                    </td>
                </tr>
                <tr>
                    <td style="border: 2px dashed brown">
                        bottom left
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

在浏览器中打开它，你会看到外部div正确填充窗口（水平和垂直），但里面的表比包含div大。我所期望的是，由于overflow: scroll，长列表可以滚动，但事实并非如此。

关于如何解决这个问题的任何想法或教程？

Answer 1

尝试将div放在“路径列表”td中，并使其可滚动而不是td本身。通过并确保没有任何填充或边框。查看设置或删除doctype是否会改变任何内容（这是怪癖和标准模式行为异常的情况之一）。

这适用于chrome 6：http://jsbin.com/oxaku4/2/edit

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html style="width: 100%; height: 100%; border: 0; margin: 0">
  <body style="width: 100%; height: 100%; border: 0; margin: 0">
    <table style="width: 100%; height: 100%; border-spacing: 0; border: 3px solid blue">

      <tr>
        <td colspan="2">
          <div style="border: 2px solid red">Toolbar</div>
        </td>
      </tr>

      <tr>
        <td style="width: 300px; border: 2px dashed orange; height:100%;">
        <div style="overflow-y:scroll; height:100%;"> 
          <!-- long list for testing -->
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          left<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
        </td>
        <td rowspan="2" style="border: 2px dashed yellow;">
          map
        </td>
      </tr>

      <tr>
        <td style="border: 2px dashed brown;">
          bottom left <br>
          some stuff <br>
          goes here <br>
        </td>
      </tr>

    </table>
  </body>
</html>

Answer 2

我认为如果你在DIV而不是表中实现该设计，它将起作用

HTML适合页面筛选问题

2 个答案: