Динамическая установка высоты DIV

Question

В веб-приложении у меня есть страница, содержащая DIV, которая имеет автоматическую ширину в зависимости от ширины окна браузера.

Мне нужна автоматическая высота для объекта. DIV начинает около 300 пикселей с верхнего экрана, и его высота должна быть растянута до нижней части экрана браузера. У меня максимальная высота для контейнера DIV, поэтому для div должна быть минимальная высота. Я считаю, что могу просто ограничить это в CSS и использовать Javascript для обработки изменения размера DIV.

Мой javascript не так хорош, как должен. Есть ли простой сценарий, который я мог бы написать, чтобы сделать это для меня?

Редактировать: DIV содержит элемент управления, который выполняет собственную обработку переполнения (реализует собственную полосу прокрутки).

Answer 1

Попробуйте это просто, специфическая функция:

function resizeElementHeight(element) { 
    var height = 0; 
    var body = window.document.body; 
    if (window.innerHeight) { 
     height = window.innerHeight; 
    } else if (body.parentElement.clientHeight) { 
     height = body.parentElement.clientHeight; 
    } else if (body && body.clientHeight) { 
     height = body.clientHeight; 
    } 
    element.style.height = ((height - element.offsetTop) + "px"); 
} 

Это не зависит от текущего расстояния от верхней части тел уточняются (в случае, если ваши 300px изменений).

---

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

Answer 2

Что должно произойти в случае переполнения? Если вы хотите, чтобы просто добраться до нижней части окна, используйте абсолютное позиционирование:

div { 
    position: absolute; 
    top: 300px; 
    bottom: 0px; 
    left: 30px; 
    right: 30px; 
} 

Это поставит DIV 30px в с каждой стороны, 300px от верхней части экрана, и на одном уровне с дном. Добавьте overflow:auto; для обработки случаев, когда содержимое больше, чем div.

---

Редактировать: @Всего, кто отметил это, объяснение было бы хорошим ... Неправильно ли с ответом?

Answer 3

DIV содержит элемент управления, который выполняет собственное переполнение.

Answer 4

Если я понимаю, что вы просите, это должно сделать трюк:

// the more standards compliant browsers (mozilla/netscape/opera/IE7) use 
// window.innerWidth and window.innerHeight 

var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("yourDiv").height = windowHeight - 300 + "px"; 

Answer 5

document.getElementById('myDiv').style.height = 500;

Это очень простой JS код, необходимый для регулировки высоты вашего объекта динамически. Я просто сделал это, когда у меня было свойство auto height, но когда я добавляю некоторый контент через XMLHttpRequest, мне нужно было изменить размер моего родительского div, и это свойство offsetheight сделало трюк в IE6/7 и FF3

Answer 6

С небольшими поправками:

function rearrange() 
{ 
var windowHeight; 

if (typeof window.innerWidth != 'undefined') 
{ 
    windowHeight = window.innerHeight; 
} 
// IE6 in standards compliant mode (i.e. with a valid doctype as the first 
// line in the document) 
else if (typeof document.documentElement != 'undefined' 
     && typeof document.documentElement.clientWidth != 'undefined' 
     && document.documentElement.clientWidth != 0) 
{ 
    windowHeight = document.documentElement.clientHeight; 
} 
// older versions of IE 
else 
{ 
    windowHeight = document.getElementsByTagName('body')[0].clientHeight; 
} 

document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop - 6)+ "px"; 
} 

Answer 7

Простейшее я мог придумать ...

function resizeResizeableHeight() { 
    $('.resizableHeight').each(function() { 
     $(this).outerHeight($(this).parent().height() - ($(this).offset().top - ($(this).parent().offset().top + parseInt($(this).parent().css('padding-top'))))) 
    }); 
} 

Теперь все, что вам нужно сделать, это добавить класс resizableHeight все, что вы хотите Autosize (на это родитель).

Answer 8

вдохновлен @ Ясон-лапочка, то же самое для любой высоты или ширины:

function resizeElementDimension(element, doHeight) { 
    dim = (doHeight ? 'Height' : 'Width') 
    ref = (doHeight ? 'Top' : 'Left') 

    var x = 0; 
    var body = window.document.body; 
    if(window['inner' + dim]) 
    x = window['inner' + dim] 
    else if (body.parentElement['client' + dim]) 
    x = body.parentElement['client' + dim] 
    else if (body && body['client' + dim]) 
    x = body['client' + dim] 

    element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px"); 
}