代码之家 › 专栏 › 技术社区 › AndiDog

HTML使页面适合屏幕问题

html-table html

AndiDog · 技术社区 · 14 年前

我希望它没有任何页面滚动工作,所以网页应该填补浏览器窗口。基本上应该如下所示:

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

overflow: scroll 但事实并非如此。

关于如何解决这个问题有什么想法或教程吗?

2 回复 | 直到 14 年前

Dagg Nabbit 14 年前

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

-1

Ahmed Khalaf 14 年前

我认为如果你在DIVs中实现这个设计,而不是在表中实现它,它就会工作