HTML подгонка страницы к экрану - PullRequest
Новая
       3

HTML подгонка страницы к экрану

1 голос
/ 25 сентября 2010

Я разрабатываю приложение для измерения и хранения беговых / велосипедных дорожек с использованием интеграции 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>

Откройте это в своем браузере, и вы увидите, что внешний блок правильно заполняет окно (по горизонтали и вертикали), но внутренняя таблица больше, чем содержащий блок. Я ожидал, что длинный список будет прокручиваться из-за overflow: scroll, но это не так.

Любые идеи или учебные пособия о том, как решить эту проблему?

Ответы [ 2 ]

0 голосов
/ 25 сентября 2010

Попробуйте поместить 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>
0 голосов
/ 25 сентября 2010

Я думаю, что если вы внедрите этот дизайн в DIV вместо таблицы, он будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...