Quick Tip #1 – Getting min-height to work in all browsers using jQuery (JavaScript)

Posted on

With most sites I build, I would have quite a big use for min-height but with not all browsers supporting it, I can't really use it. So today I had a bash using jQuery to solve this dilemma, and here's what I came up with.

First I defined my minimum height for my element in a var called minHeight. Then defined the height of the element (that I wanted to apply the minimum height to) as the page was loading into actualHeight using jQuery's height() function to obtain the value.

Then using an if statement I basically said, if the height of my div is smaller than my minimum height, apply the minimum height to it's CSS property.

Give it a whirl! Comment below with any problems or where you've used it.

$(document).ready(function(){
	
	var minHeight = 540;
	    
	var actualHeight = $('#div-name').height();
	    
	if (actualHeight < minHeight){
	    
		$('#div-name').css({'height' : minHeight});
	    
	};			
						
});

7 comments

  • Clemente G - kreativeKING wrote on

    Great tip, I’ve just starting messing with jQuery recently. I must say it is great.

    You know if theres a way to handle jQuery with using named callbacks instead of creating the function in the callback area.

    Ex:
    Normal Way

    $(function(){
    $(’a’).click(function({
    “blahblah”});
    });

    Named Way

    $(function(){
    $(’a’).click(myFunc);
    }

    function myFunc(){
    “blahblah”
    }
    );

    Any Tips??

    • Nouveller wrote on

      I think you can.

      Change:

      $(function(){
      $(’a’).click(myFunc);
      }

      To:

      $(function(){
      $(’a’).click.myFunc();
      }

    • Liam Goodacre wrote on

      I do believe you can do this…

      var myFunc = function() {
      // blah blah blah
      }

      $(function(){
      $(‘a’).click(myFunc);
      });

  • Kyle wrote on

    This gets me *so* close — however, how can I add a resize event? AND — the problem with a resize event is that it can change the “actualHeight” value to one other than what the DOM thought it was at page load — which is what I want to keep for resize. Thanks!

    • Nouveller wrote on

      Do you have a demo of the page?

      • Kyle wrote on

        It’s not up but here’s the rewritten code:

        function setHeight() {
        var winHeight = $(window).height();
        var minHeight = winHeight – 80;
        var actualHeight = $(‘#page-inner’).height();
        if (actualHeight < minHeight){
        $(‘#page-inner’).css({‘height’ : minHeight});
        };
        }

        $(document).ready(function(){
        setHeight();
        });

        $(window).resize(function(){
        setHeight();
        });

      • Kyle wrote on

        OK I have something up:
        http://www.skrinakcreative.com/illumaware-redesign

        Note that the problem isn’t immediately apparent; and here’s what I’d like to do. When someone loads the page, the div’s (where I’m setting the min-height value; if necessary) “actual height” should be a persistent value; at least persistent for the duration of that visit. Currently, however, when jquery changes the actual height, as I ask it to, it skews the behavior. You can see this where resizing to a higher vertical value works, but resizing to a lesser vertical value doesn’t (as it follows the logic)

        So, how does one load the “actual height” with a persistent value and then work against that across successive page resizings?

        The script for the page resides at:
        http://www.skrinakcreative.com/illumaware-redesign/sites/all/themes/illumaware/script-6241.js

        Thanks!

Add your comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>