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

Question

В диалоговом окне пользовательского интерфейса jQuery содержатся два элемента: div. У одной фиксированной высоты и всегда должна быть выровнена в нижней части диалогового окна. Другой должен заняться оставшимся пространством.

В основном я хотел бы все размеры выделены синим цветом остаются неизменными на изменение размера. Или, другими словами, красный div изменяется в обоих измерениях, но зеленый div сохраняет свою высоту.

Какой самый простой способ сделать это в пользовательском интерфейсе jQuery или даже просто в CSS?

Answer 1

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

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

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

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

Answer 2

Просто CSS ... check it out!

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

Answer 3

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

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

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

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

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 
});