Configurando a altura de um DIV dinamicamente

Question

Em uma aplicação web, tenho uma página que contém um DIV que possui largura automática dependendo da largura da janela do navegador.

Preciso de uma altura automática para o objeto.O DIV começa a cerca de 300px da tela superior e sua altura deve esticá-lo até a parte inferior da tela do navegador.Eu tenho uma altura máxima para o contêiner DIV, então teria que haver uma altura mínima para o div.Acredito que posso restringir isso em CSS e usar Javascript para lidar com o redimensionamento do DIV.

Meu javascript não é tão bom quanto deveria ser.Existe um script fácil que eu poderia escrever que faria isso por mim?

Editar:O DIV abriga um controle que faz seu próprio tratamento de overflow (implementa sua própria barra de rolagem).

Answer 1

Experimente esta função simples e específica:

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

Não depende da distância atual do topo do corpo que está sendo especificada (caso seus 300px mudem).

---

EDITAR:A propósito, você gostaria de chamar isso naquela div toda vez que o usuário alterasse o tamanho do navegador, então você precisaria conectar o manipulador de eventos para isso, é claro.

Answer 2

O que deve acontecer em caso de estouro?Se você quiser que ele chegue apenas à parte inferior da janela, use o posicionamento absoluto:

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

Isso colocará o DIV 30px de cada lado, 300px da parte superior da tela e alinhado com a parte inferior.Adicione um overflow:auto; para lidar com casos em que o conteúdo é maior que o div.

---

Editar:@Quem marcou isso, uma explicação seria legal ...Há algo errado com a resposta?

Answer 3

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

Este é o código JS básico necessário para ajustar a altura do seu objeto dinamicamente.Acabei de fazer exatamente isso onde tinha alguma propriedade de altura automática, mas quando adiciono algum conteúdo via XMLHttpRequest Eu precisava redimensionar meu div pai e essa propriedade offsetheight funcionou no IE6/7 e FF3

Answer 4

O DIV abriga um controle que faz seu próprio tratamento de overflow.

Answer 5

Se entendi o que você está perguntando, isso deve funcionar:

// 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

Com pequenas correções:

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

O mais simples que consegui inventar...

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

Agora tudo que você precisa fazer é adicionar a classe resizableHeight a tudo que você deseja dimensionar automaticamente (ao pai).

Answer 8

inspirado em @ jason-bunting, a mesma coisa para altura ou largura:

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