Установить высоту 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-ом прописать высоту оставшейся рабочей области экрана В ПИКСЕЛЯХ. Помогите пожалуйста |
Что бы не было прокрутки:
body { overflow-x: hidden } Что бы установить высоту элементов в body html, body { height: 100% } Своей таблице пропиши высоту, есть функция calc к примеру: height: calc(100% - 200px); Ну а диву поставь высоту 100% |
Не подойдет Суть в том, что в этом див-е вертится скроллируемый с помощью jsScrollpan контент, а jsScrollpan не хочет понимать высоту дива в процентах, только в пикселях.
Вот по этому и надо javascript-ом вычислить эту высоту и в стиль дива вписать. |
Для создания скрола плагины не нужны. ставишь высоту диву в любой css величине и overflow: scroll; Нет не каких проблем, и js не нужен.
|
http://jsfiddle.net/nhtvLqo5/ Если тебе надо именно JS то у JQuery есть методы .width() и .height(), но здесь и без js можно легко обойтись.
|
Цитата:
|
Или другим путем
В той разметке, что выше, высота всего, что выше нужного нам дива в районе 150 пикселей.
Как вычислить оставшуюся высоту в пикселях и прописать в стиль нужного див-а? То-есть взять рабочую область окна браузера вычесть из нее 150 пикселей и остатки передать в стиль конкретно этого див-а. |
Что бы дочерние элементы можно было растянуть по всей высоте.
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); |
Цитата:
По этому и спросил про то, как это сделать js-ом. |
Цитата:
Пример ниже: <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. |