Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Установить высоту DIV-a (https://javascript.ru/forum/dom-window/59894-ustanovit-vysotu-div.html)

dpts 02.12.2015 07:10

Установить высоту DIV-a
 
Есть разметка (примерно похожая):
<div style="height:32px;"
<table style="width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
</div>
<table style="height: 200px;width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
<div>
<table style="width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
</div>
<table rules="all" style="bordercollapse: collapse; border: 1px solid #000000;width:95%;">
    <tr>
 
        <td><DIV style="margin:10px;border:1px dotted #000000;width:15%;">ТОЛЬКО ЭТОМУ ДИВУ НУЖНА ВСЯ ОСТАВШАЯСЯ ВЫСОТА РАБОЧЕЙ ОБЛАСТИ ОКНА, ЧТОБЫ НЕ ПОЯВЛЯЛАСЬ ВЕРТИКАЛЬНАЯ ПРОКРУТКА</DIV></td>
 
    </tr>
    <tr>
        <td><div>...</div></td>
    </tr>
    </table>


Нужно выделенному капсом диву (единственному) javascript-ом прописать высоту оставшейся рабочей области экрана В ПИКСЕЛЯХ.
Помогите пожалуйста

Алексей Петрович 02.12.2015 08:20

Что бы не было прокрутки:
body { overflow-x: hidden }

Что бы установить высоту элементов в body
html, body { height: 100% }

Своей таблице пропиши высоту, есть функция calc к примеру: height: calc(100% - 200px);

Ну а диву поставь высоту 100%

dpts 02.12.2015 09:16

Не подойдет Суть в том, что в этом див-е вертится скроллируемый с помощью jsScrollpan контент, а jsScrollpan не хочет понимать высоту дива в процентах, только в пикселях.
Вот по этому и надо javascript-ом вычислить эту высоту и в стиль дива вписать.

Алексей Петрович 02.12.2015 10:46

Для создания скрола плагины не нужны. ставишь высоту диву в любой css величине и overflow: scroll; Нет не каких проблем, и js не нужен.

Алексей Петрович 02.12.2015 11:06

http://jsfiddle.net/nhtvLqo5/ Если тебе надо именно JS то у JQuery есть методы .width() и .height(), но здесь и без js можно легко обойтись.

dpts 03.12.2015 07:33

Цитата:

Сообщение от Алексей Петрович (Сообщение 398373)
Для создания скрола плагины не нужны. ставишь высоту диву в любой css величине и overflow: scroll; Нет не каких проблем, и js не нужен.

Согласен, jsScrolpan пользуется не для создания прокрутки, а для "свистелки" - облагораживания вида полосы прокрутки (замены стандартной), - а это важно в моем случае.

dpts 03.12.2015 09:05

Или другим путем
 
В той разметке, что выше, высота всего, что выше нужного нам дива в районе 150 пикселей.

Как вычислить оставшуюся высоту в пикселях и прописать в стиль нужного див-а?

То-есть взять рабочую область окна браузера вычесть из нее 150 пикселей и остатки передать в стиль конкретно этого див-а.

Алексей Петрович 03.12.2015 13:39

Что бы дочерние элементы можно было растянуть по всей высоте.
html, body { height: 100% }

И функция calc() в ней пишешь всю математику: calc(100% - 150px)
Её можно писать практически где угодно
height: calc(100% - 150px);
width: calc((60% - 340px) / 2);
border: calc(1px + 1px) solid red;
Также для указания порядка действий скобочки(), и между знаками не забывай ставить пробелы.

И конкретно для твоего дива: height: calc(100% - 150px);

dpts 04.12.2015 07:09

Цитата:

Сообщение от Алексей Петрович (Сообщение 398540)
Что бы дочерние элементы можно было растянуть по всей высоте.
html, body { height: 100% }

И функция calc() в ней пишешь всю математику: calc(100% - 150px)
Её можно писать практически где угодно
height: calc(100% - 150px);
width: calc((60% - 340px) / 2);
border: calc(1px + 1px) solid red;
Также для указания порядка действий скобочки(), и между знаками не забывай ставить пробелы.

И конкретно для твоего дива: height: calc(100% - 150px);

Опробовано, - не работает. Чистым CSS не работает. надо чтобы в стиле div-а было прописано конкретное значение в пикселях, видимо calc(100%-150) не возвращает значение вида 800px.
По этому и спросил про то, как это сделать js-ом.

dpts 04.12.2015 09:31

Цитата:

Сообщение от Алексей Петрович (Сообщение 398540)
Что бы дочерние элементы можно было растянуть по всей высоте.
html, body { height: 100% }

И функция calc() в ней пишешь всю математику: calc(100% - 150px)
Её можно писать практически где угодно
height: calc(100% - 150px);
width: calc((60% - 340px) / 2);
border: calc(1px + 1px) solid red;
Также для указания порядка действий скобочки(), и между знаками не забывай ставить пробелы.

И конкретно для твоего дива: height: calc(100% - 150px);

Кстати jsScrollPane абсолютно не причем. Опытным путем устанавливаем, что для свойства height дива c overflow чудо функция calc - работать не хочет.
Пример ниже:
<div style="height:32px;"
<table style="width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
</div>
<table style="height: 200px;width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
<div>
<table style="width:100%;">
<tr>
      <td><div> ... </div></td>
</tr>
</table>
</div>
<table rules="all" style="bordercollapse: collapse; border: 1px solid #000000;width:95%;">
    <tr>

        <td>
            <DIV style="margin:10px;border:1px dotted #000000;width:15%;overflow-y:auto;height: calc(100%-1500px);">
                Запускаем инсталлятор RAWGraphicsSuiteX7Installer_RU32Bit.exe или CorelDRAWGraphicsSuiteX7Installer_RU64Bit.exe (в зависимости от вашей операционной системы)
                Просит серийный номер. Нажимаем "У меня есть серийный номер или код подписки". Запускаем keygen, выбираем "Corel Draw Graphics Suite X7", генерируем Serial, копируем, вводим в окно установки программы и не закрываем keygen до окончания активации.
                После завершения установки отключить интернет.
                Запускаем CorelDRAW, появляется окно с просьбой активировать программу.
                Выбираем "Другие варианты активации".
                В следующем окне жмем "Свяжитесь с Corel".
                Копируем "Код установки" из окна активации программы и вставляем его в строку "Installation Code" в keygen.
                В keygene нажимаем Activation.
                Копируем "Activation Code" и вставляем его в окно активации программы. Нажимаем продолжить. Если появится окно с сообщением о неправильном серийном номере - просто закройте его. Все программа зарегистрирована.
                Нажимаем "Save to File" и сохраняем регистрационные данные.
                После первого запуска программы появится окно с предложением создать учетную запись Corel - закрывайте его. После нескольких запусков программы в окне появится пункт "Больше не показывать" - поставьте в нем галочку. Больше это окно появляться не будет.
            </DIV>
        </td>

    </tr>
    <tr>
        <td><div>...</div></td>
    </tr>
    </table>


вычитать из 100% можно любое значение абсолютно бесполезно, в див стает высотой - в высоту содержащегося в нем контента.


Часовой пояс GMT +3, время: 00:20.