Setting the height of a DIV dynamically

Question

In a web application, I have a page that contains a DIV that has an auto-width depending on the width of the browser window.

I need an auto-height for the object. The DIV starts about 300px from the top screen, and its height should make it stretch to the bottom of the browser screen. I have a max height for the container DIV, so there would have to be minimum-height for the div. I believe I can just restrict that in CSS, and use Javascript to handle the resizing of the DIV.

My javascript isn't nearly as good as it should be. Is there an easy script I could write that would do this for me?

Edit: The DIV houses a control that does it's own overflow handling (implements its own scroll bar).

Jason Bunting · Accepted Answer · 2008-08-28T21:11:05.133

Try this simple, specific function:

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

It does not depend on the current distance from the top of the body being specified (in case your 300px changes).

EDIT: By the way, you would want to call this on that div every time the user changed the browser's size, so you would need to wire up the event handler for that, of course.

score 10 · Answer 2 · edited Feb 08 '16 at 14:51

What should happen in the case of overflow? If you want it to just get to the bottom of the window, use absolute positioning:

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

This will put the DIV 30px in from each side, 300px from the top of the screen, and flush with the bottom. Add an overflow:auto; to handle cases where the content is larger than the div.

Edit: @Whoever marked this down, an explanation would be nice... Is something wrong with the answer?

score 8 · Answer 3 · edited Feb 08 '16 at 14:52

8

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

This is the very basic JS code required to adjust the height of your object dynamically. I just did this very thing where I had some auto height property, but when I add some content via XMLHttpRequest I needed to resize my parent div and this offsetheight property did the trick in IE6/7 and FF3

edited Feb 08 '16 at 14:52

Alexander Elgin

6,796
4
40
50

answered Aug 28 '08 at 19:03

Toran Billups

27,111
40
155
268

@AlexanderElgin I REALLY like this answer, but unfortunately it just doesn't work for me. :( ...I already have the size I want in an int, but when I try this, it's just ignored! Mine is target.style.height = height; ... Not sure what I'm doing wrong! – Richard T Sep 11 '18 at 04:13
1

Note that if you use this method you need to add 'px' or another unit at the end. For example, above it would be `document.getElementById('myDiv').style.height = '500px';`. If you have a dynamic height you can use `height + 'px'`. – Robert Corponoi Dec 14 '20 at 14:29

Shanti · Answer 4 · 2009-11-12T16:35:59.547

With minor corrections:

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

RawBits · Answer 5 · 2014-09-29T14:55:56.413

0

Simplest I could come up...

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

Now all you have to do is add the resizableHeight class to everything you want to autosize (to it's parent).

edited Sep 29 '14 at 14:55

answered Sep 26 '14 at 15:06

RawBits

53
8

score 0 · Answer 6 · answered Aug 28 '08 at 19:02

If I understand what you're asking, this should do the trick:

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

score 0 · Answer 7 · answered Nov 05 '16 at 04:24

inspired by @jason-bunting, same thing for either height or width:

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

Setting the height of a DIV dynamically

7 Answers7

Linked

Related