Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > таблица со скролингом


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

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

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

Автор: 0Scrum 27.7.2011, 19:04
Силами css никак если не заданы жесткие размеры блоков, JavaScript'ом можно решить.

Автор: 17dufa 27.7.2011, 19:40
0Scrum, не вопрос. пусть будет js

Автор: 0Scrum 27.7.2011, 20:47
Ну тогда примерно так.
Код

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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)