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).

Answer 1

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.