Сделайте div, вложенное в диалоговом окне jQuery UI, измените размер с помощью диалога?

Ответ 1

Ive нашел способ сделать это, который не использует JavaScript. Это даже не связано с хаками; просто обычный обычный CSS3. Fiddle здесь: http://jsfiddle.net/nty5K/16/

В принципе, оба divs position: absolute, и каждая из сторон привязывается индивидуально, используя свойства top, bottom, left и right. Верхний div имеет все указанные четыре позиции, что делает его изменением размера с помощью контейнера, сохраняя точное расстояние до каждого края контейнера. Нижний div имеет три фиксированные позиции, тогда как верх определяется только косвенно, через фиксированную высоту.

На практике, divs нужно будет поместить в div-обертку с position: relative, иначе верхние/нижние div будут помещаться относительно элемента body.

Не уверен в совместимости с браузером, но это отлично работает в Firefox 10, IE9 и Chrome 17. Не тестировал это в более ранних версиях.

Ответ 2

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

EDIT: Теперь, когда я вижу, что вам нужно, я обновил свою скрипку. Включая приведенный ниже код для полноты.

Я бы написал функцию для вычисления размера диалогового окна, вычитал высоту фиксированного div и установил высоту динамического div для этого рассчитанного значения. Затем я связал бы вызов этой функции с событием изменения размера диалогового окна. Здесь - скрипка, может потребоваться некоторая настройка для вашего точного макета, но должна быть закрыта.

Следует заметить, что некоторые браузеры могут неправильно вычислять, когда они находятся в середине события прокрутки/изменения размера, что приводит к сбоям в вычислениях после того, как событие resize завершается с помощью setTimeout, решает проблемы, хотя и делает изменение немного нерешительный, пока выполняется изменение размера. См. Этот вопрос и ответьте на подробности.

function SetDivHeight() {
    var $DynamicDiv = $('div.dynamic');
    var $FixedDiv = $('div.fixed');
    var $Container = $(window); //Update for containing element

/*Calculate the adjustment needed to account for the margin and 
border of the dynamic div.*/
    var HeightAdjustment = $DynamicDiv.outerHeight(true) - $DynamicDiv.height();

/*Get the values of the top and bottom margins which overlap 
between the two divs.*/
    var DynamicBottomMargin = parseInt($DynamicDiv.css('marginBottom'));
    var FixedTopMargin = parseInt($FixedDiv.css('marginTop'));

/*Adjust for the overlapping top/bottom margin by subtracting 
which ever is smaller from the adjustment value.*/
    if (DynamicBottomMargin >= FixedTopMargin) {
        HeightAdjustment -= FixedTopMargin;
    } else {
        HeightAdjustment -= DynamicBottomMargin;
    }


/*subtract the height of the fixed div from the height of the 
container, subtract the calculated height adjustment from that 
value, and set the result as the height of the dynamic div.*/
    $DynamicDiv.height(($Container.height() - $FixedDiv.outerHeight(true)) - 
HeightAdjustment);
/*May need to use $Container.innerHeight instead, if container 
is not a window element.*/
}

var t;

function QueueSetDivHeight() {
    if (t) {
        clearTimeout(t);
    }
    t = setTimeout(function() {
        SetDivHeight();
    }, 0);
}

$(document).ready(function() {
    SetDivHeight();
    $(window).resize(QueueSetDivHeight);
    //Bind to resize of container element instead/as well
});

Ответ 3

Просто CSS... проверить!

Задайте a margin для контейнера и margin-top до нижней фиксированной div. Не требуется jQuery.