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
,长列表将滚动,但事实并非如此。
有关如何解决此问题的任何想法或教程?
尝试把一个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>
好的,这可以防止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
我认为如果你实现的DIV,而不是表的设计,将工作
你能否提供一个简单的例子,我不明白它与DIVs正常工作。同样的问题 - 内部DIV(左侧)溢出外部DIV而不是可滚动。 – AndiDog 2010-09-25 18:56:56
谁downvoting没有留下评论? – AndiDog 2010-09-25 18:53:30