Динамическая настройка высоты элемента управления

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

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

---

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

Answer 2

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

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

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

---

Редактировать:@Кто бы это ни отметил, объяснение было бы неплохим...Что-то не так с ответом?

Answer 3

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

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

Answer 4

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

Answer 5

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

// 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 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 ко всему, что вы хотите изменить автоматически (к его родительскому элементу).

Answer 8

вдохновлено @jason-бантинг, то же самое для высоты или ширины:

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