Высота боковой панели 100% с изменением размера div в браузере - PullRequest
Новая
       29

Высота боковой панели 100% с изменением размера div в браузере

0 голосов
/ 01 ноября 2011

У меня проблема с моим сайтом.Слева у меня есть боковая панель, а рядом - контейнер.На данный момент я нашел эту функцию JavaScript:

$ (документ) .ready (function () {$ ("# sidebar"). Height ($ (документ) .height ());});

Этот скрипт гарантирует, что моя боковая панель на 100%.Также, если я изменяю размер экрана, боковая панель автоматически меняет высоту.

Проблема в том, что у меня в контейнере есть панель мониторинга с подвижными элементами div, которые могут изменять размер и могут накладываться друг на друга.(пример: http://demo.webdeveloperplus.com/drag-drop-panels/)

Если я уложу эти div друг под другом, боковая панель не изменит высоту автоматически. Как я могу убедиться, что боковая панель также меняет высоту, когда я складываю эти div в контейнере?Нужно ли зацикливать сценарий?

Надеюсь, что кто-то может мне помочь с этим.

(ps. У меня нет нижнего колонтитула на моем веб-сайте, поэтому боковая панель должна оставаться на высотедокумент. (фон))

Ответы [ 2 ]

1 голос
/ 01 ноября 2011

Хорошо, это ответ из двух частей. Первая часть заключается в том, что вам нужно получить высоту окна просмотра для браузера. Вторая часть заключается в том, что вам нужно будет повторно выполнять эту функцию всякий раз, когда окно изменяет размеры. после некоторого тестирования (в IE 9, Chrome и FF) я обнаружил, что это хорошо работает: 

function getClientHeight() {
    var retval = 0;

    if (typeof (window.innerHeight) == 'number') {
        retval = window.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        retval = document.documentElement.clientHeight;
    } else if (document.body && document.body.clientHeight) {
        retval = document.body.clientHeight;
    }

    return retval;
}

$(document).ready(function () {
    $(window).resize(function (event) {
        $("#sidebar").height(getClientHeight());
    });

    $("#sidebar").height(getClientHeight());
});
0 голосов
/ 02 ноября 2011

Я исправил проблему сейчас. Я использовал другой способ установить высоту боковой панели всегда 100%.

Для людей, которые хотят знать, как я это исправил:

Я дал стиль #sidebar: position: fixed; и поместил div внутри боковой панели за пределами div и сделал новый div #sidebarcontent. Затем дал #sidebarcontent стиль позиции: absolute; и разместил их в нужном месте. Я проверил это для кросс-браузер, и он работал даже на IE6

...