VPF::таблица со скролингом - Форум программистов

17dufa

Дата 27.7.2011, 18:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 324
Регистрация: 2.3.2006

Репутация: нет
Всего: 5

Добрый день
есть страница. наверху всякие элементы, занимающие с полстраницы. низ отдан большой таблице. надо - чтобы вертикальный скролинг был внутри таблицы, а не на всю страницу. нужно это для того, чтоб когда скролишь таблицу, всегда видел информацию сверху.
сейчас примерно так:

Код


<%-- верх страницы --%>
<table style="height:400px; overflow-y:scroll;display: block;">
<%-- дофига лабуды --%>
</table>

все работает. но вот 400px - это жестокий хак, подобранный вручную. понятно, что стоит пересесть на другой моник и вся красота пропадет. собственно вопрос - как сделать по-правильному?

0Scrum

Дата 27.7.2011, 19:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Силами css никак если не заданы жесткие размеры блоков, JavaScript'ом можно решить.

17dufa

Дата 27.7.2011, 19:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 324
Регистрация: 2.3.2006

Репутация: нет
Всего: 5

0Scrum, не вопрос. пусть будет js

0Scrum

Дата 27.7.2011, 20:47 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 47
Регистрация: 24.1.2011

Репутация: 2
Всего: 3

Ну тогда примерно так.

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css">

  html,body {
    height: 100%;
    margin:0;
    overflow: hidden;
  }

  #table1 {
    background:  yellowgreen;
  }
  #table2 {
    background: orange;
    overflow-y:auto;
  }

  </style>


  <script type="text/javascript">

  window.onload = function() {
    /* высота рабочей области */
    var ClientHeight = document.body.offsetHeight;
    /* высота верхней части */
    var table1Height = document.getElementById('table1').offsetHeight;
    /* Задаем высоту для дофига лабуды со скролом */
    var table2 = document.getElementById('table2');
    table2.style.height = (ClientHeight-table1Height)+"px";
  }

  </script>

</head>

<body>

    <div id="table1">
        <table>
            <tr>
                <td>  верх страницы </td>
            </tr>
        </table>
    </div>

    <div id="table2">
        <table>
            <tr>
                <td> дофига лабуды  </td>
            </tr>
        </table>
    </div>

</body>

</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »