I wrote the following code to give an HTML element max width/height in its parent container. I think I address the box model issues but I am wondering if anyone can see issues and or shortcomings.

Are there other solutions out there that accomplish this? I want to make sure I didn't re-invent the wheel.

function heightBuffer(control) {
    return parseInt((control.outerHeight(true)) - control.height());

function widthBuffer(control) {
    return parseInt((control.outerWidth(true)) - parseInt(control.width()));

function MaxHeightInParent(control, minHeight, controlHeightsToSubtract) {
    var h = parseInt(control.parent().height()) - heightBuffer(control);
    if (controlHeightsToSubtract != null)
        $.each(controlHeightsToSubtract, function(index, value) {
            h = h - parseInt(value.outerHeight(true));

    if (minHeight != null && h < minHeight) h = minHeight;
    control.css('min-height', h);

function MaxWidthInParent(control, minWidth, controlWidthsToSubtract) {
    var w = parseInt(control.parent().width()) - widthBuffer(control);
    if (controlWidthsToSubtract != null)
        $.each(controlWidthsToSubtract, function(index, value) {
            w = w - parseInt(value.outerWidth(true));
    if (minWidth != null && w < minWidth) w = minWidth;
    control.css('min-width', w);

Note controlHeightsToSubtract / controlWidthsToSubtract are if you wish to pass an array of controls that share the containing element with the element you are attempting to maximize in Height/Width.


1 Answer 1


What is

parseInt((control.outerHeight(true)) - control.height());

supposed to achieve?

The result of - is always going to be a number, so what this does is convert the number to a string and back to a number. This can only lose precision and waste time.

Similarly, the use of parseInt on the first argument is also unnecessary

parseInt(control.parent().height()) - heightBuffer(control)


"4" - 1 === 3

In fact, the automatic conversion that - does is better than that done by parseInt since parseInt falls back to octal on some interpreters but not others.

"10"             - 1 === 9
parseInt("10")   - 1 === 9
"0x10"           - 1 === 15
parseInt("0x10") - 1 === 15
"010"            - 1        // throws reliably
parseInt("010")  - 1 === 7  // on some and 9 on others

so I'd get rid of all the uses of parseInt as an operand to -.

You seem to be setting min-height but the method is called MaxHeight. That confuses me.

When you change the CSS

control.css('min-height', h)

you might want to specify units as in

control.css('min-height', h + "px")

I'm not sure how you're handling the widths of margins and borders on the controls. Is that important to you?


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.