Блог

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

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

#height

#высота

Вопрос:

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

$ (документ).готово(функция(){ $(«#sidebar»).высота ( $ (документ).высота() ); });

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

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

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

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

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

Ответ №1:

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

 function getClientHeight() {
    var retval = 0;

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

    return retval;
}

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

    $("#sidebar").height(getClientHeight());
});

Комментарии:

1. Он по-прежнему не работает. Я вставил этот код внутрь <head> , но #sidebar div по-прежнему не увеличивал высоту после размещения этих перетаскиваемых блоков друг под другом внутри контейнера. Он имеет высоту всего окна браузера, но если div контейнера становится выше, я получаю прокрутку и вижу, что #sidebar остается неизменным.

Ответ №2:

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

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

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

Метки: