Impostazione dinamica dell'altezza di un DIV

Question

In un'applicazione Web, ho una pagina che contiene un DIV con una larghezza automatica che dipende dalla larghezza della finestra del browser.

Ho bisogno di un'altezza automatica per l'oggetto.Il DIV inizia a circa 300 px dallo schermo superiore e la sua altezza dovrebbe estendersi fino alla parte inferiore dello schermo del browser.Ho un'altezza massima per il contenitore DIV, quindi dovrebbe esserci un'altezza minima per il div.Credo di poter semplicemente limitarlo nei CSS e utilizzare Javascript per gestire il ridimensionamento del DIV.

Il mio Javascript non è così buono come dovrebbe essere.C'è una sceneggiatura semplice che potrei scrivere che farebbe questo per me?

Modificare:Il DIV ospita un controllo che gestisce l'overflow (implementa la propria barra di scorrimento).

Answer 1

Prova questa funzione semplice e specifica:

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

Non dipende dalla distanza attuale dalla parte superiore del corpo specificata (nel caso in cui i tuoi 300px cambino).

---

MODIFICARE:A proposito, vorresti chiamarlo su quel div ogni volta che l'utente cambia la dimensione del browser, quindi avresti bisogno di collegare il gestore eventi per questo, ovviamente.

Answer 2

Cosa dovrebbe succedere in caso di overflow?Se vuoi che arrivi solo in fondo alla finestra, usa il posizionamento assoluto:

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

Ciò inserirà il DIV 30px da ciascun lato, 300px dalla parte superiore dello schermo e a filo con il fondo.Aggiungi un overflow:auto; per gestire i casi in cui il contenuto è più grande del div.

---

Modificare:@Chiunque abbia annotato questo, una spiegazione sarebbe carina...C'è qualcosa che non va nella risposta?

Answer 3

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

Questo è il codice JS di base richiesto per regolare dinamicamente l'altezza del tuo oggetto.Ho appena fatto proprio questa cosa in cui avevo alcune proprietà di altezza automatica, ma quando aggiungo del contenuto tramite XMLHttpRequest Avevo bisogno di ridimensionare il mio div genitore e questa proprietà offsetheight ha funzionato in IE6/7 e FF3

Answer 4

Il DIV ospita un controllo che gestisce autonomamente l'overflow.

Answer 5

Se ho capito cosa stai chiedendo, questo dovrebbe fare al caso tuo:

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

Con piccole correzioni:

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

La cosa più semplice che potrei inventare...

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

Ora tutto ciò che devi fare è aggiungere la classe resizableHeight a tutto ciò che desideri ridimensionare automaticamente (al suo genitore).

Answer 8

ispirato da @jason-bunting, stessa cosa sia per l'altezza che per la larghezza:

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