Установка высоту DIV динамически

голоса
21

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

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

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

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

Задан 28/08/2008 в 17:52
источник пользователем
На других языках...                            


8 ответов

голоса
9

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

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

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


Edit: @Whoever отмечены это вниз, объяснение было бы неплохо ... Что-то случилось с ответом?

Ответил 28/08/2008 в 17:57
источник пользователем

голоса
0

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

Ответил 28/08/2008 в 17:58
источник пользователем

голоса
0

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

// 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";
Ответил 28/08/2008 в 18:02
источник пользователем

голоса
0

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

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

Ответил 28/08/2008 в 18:03
источник пользователем

голоса
29

Попробуйте эту простую, определенную функцию:

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 каждый раз, когда пользователь изменил размер браузера, так что вам нужно будет подключить обработчик событий для этого, конечно.

Ответил 28/08/2008 в 18:11
источник пользователем

голоса
0

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

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";
}
Ответил 11/11/2009 в 22:51
источник пользователем

голоса
0

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

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 (для его родителей).

Ответил 26/09/2014 в 14:06
источник пользователем

голоса
0

вдохновленный @ 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");
}
Ответил 05/11/2016 в 02:24
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more