HTML适合页面到屏幕问题

我正在开发一个应用程序，用于使用OSM/Google地图集成来测量和存储运行/单车轨道。HTML适合页面到屏幕问题

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

+---------------------------------+ 
|  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正确（水平和垂直），使窗口，但该表内比包含分区更大。我所期望的是，由于overflow: scroll，长列表将滚动，但事实并非如此。

有关如何解决此问题的任何想法或教程？

来源

2010-09-25 AndiDog

谁downvoting没有留下评论？ – AndiDog 2010-09-25 18:53:30

尝试把一个div的TD“的路线清单”内，使可滚动，而不是TD本身。通过并确保没有填充或边框。查看设置或删除文档类型是否会改变任何内容（这是怪癖和标准模式行为差异很大的情况之一）。

这在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>

来源

2010-09-25 19:16:58

好的，这可以防止TD在外部DIV上溢出。但该页面仍然不适合浏览器窗口 - 我不想让页面滚动，而只是“路由列表”。在你的示例解决方案中，表不服从'height：100％'，但增长得更高，因此我必须滚动页面。 – AndiDog 2010-09-25 19:40:43

IE8适合所有浏览器窗口，但橙色框（路由列表）显示为7像素高。我是否说我讨厌HTML？... – AndiDog 2010-09-25 19:56:05

我认为你处于需要开始处理文档类型的地步。这个例子在chrome 6中适用于我，可能需要调整才能适用于所有浏览器。欢迎来到网络开发的精彩世界; p – 2010-09-25 20:01:39

-1

我认为如果你实现的DIV，而不是表的设计，将工作

来源

2010-09-25 18:49:36

你能否提供一个简单的例子，我不明白它与DIVs正常工作。同样的问题 - 内部DIV（左侧）溢出外部DIV而不是可滚动。 – AndiDog 2010-09-25 18:56:56

HTML适合页面到屏幕问题

回答

相关问题