How to apply min-height to DIV using jQuery?

Question

Hi I want to apply min-height to ".wide-content"

min-height of .wide-content = height of right content - "274px"

var leftHeight = $(".wide.content").height();
var rightHeight = $("#right_column").height();
alert (leftHeight); alert (rightHeight);

if (leftHeight < rightHeight) {
  $(".wide.content").css('minHeight' 'leftHeight - 274');
}

Thanks in Advance

Answer 1

Instead of a string for the assigned value, you need the actual number, like this:

if (leftHeight < rightHeight) {
  $(".wide.content").css('minHeight', leftHeight - 274);
}

Also when using .css(), instead of .css('prop' 'value') you need a comma in there, like this:

$(selector).css('prop', 'value');
//or:
$(selector).css({'prop': 'value'}); //when assigning many at once, like this:
$(selector).css({'prop': 'value', 'prop2': 'value2'});

Answer 2

JQuery follows camelCase naming convention as well - separated css property naming convention.

Exampl:

CSS             JQuery
=========       =======
font-size       fontSize or font-size
border-width    borderWidth or border-width

Answer 3

The following piece of code works for me.

   $('#test').css({
      minHeight: 500
    });