Want to set category menu height according to media set

Hello everyone, I am converting my theme to view in mobile version and want to set my menu height automatic when browse from any mobile device. My all coding working fine but only problem in category menu system. I am posting here CSS i am using and other related information. Please help me as soon as possible to complete my wordpress theme.

CSS Code:

/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:url(images/yodaGradients.png) repeat-x 0 -400px #303030;background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#1a1a1b),color-stop(1,#424242)); height:30px; border-top:0px solid #dfdfdf;  margin:0 0px 0 0px;border-bottom:2px solid #ff6633; }


/* category navigation */
.nav { z-index:99; float:left; margin:0px; padding:0px; list-style:none; line-height:1; height:30px;  }
.nav a { position:relative; color:#ffffff; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto;  }
.nav li a { padding:7px 12px; text-decoration:none;}
.nav li a:hover, .nav li a:active, .nav li.current-cat, .nav li.current-cat-parent { color:#17b2e2; }
.nav li a.sf-with-ul {  }
.nav li ul { background:#303030; position:absolute; left:-999em; width:172px; margin:0px 0px 0px -2px; border:1px solid #ff6633; border-width:1px 1px 1px 1px; z-index:999; }
.nav li ul li { border-top:1px solid #303030; border-bottom:1px solid #303030; border-right:none; }
.nav li ul li a { background:#303030;width:147px; padding:7px 12px; color:#fff; font-size:11px; font-weight:normal; }
.nav li ul li a.sf-with-ul { padding:7px 12px; }
.nav li ul li a:hover { background:#303030; color:#17B2E2; }
.nav li ul ul { margin:-31px 0px 0px 171px; }
.nav li ul ul li a {  }
.nav li ul li ul li a {  }
.nav li:hover,.nav li.hover { position:static; }
.nav li:hover ul ul, .nav li.sfhover ul ul,
.nav li:hover ul ul ul, .nav li.sfhover ul ul ul,
.nav li:hover ul ul ul ul, .nav li.sfhover ul ul ul ul { left:-999em; }
.nav li:hover ul, .nav li.sfhover ul,
.nav li li:hover ul, .nav li li.sfhover ul,
.nav li li li:hover ul, .nav li li li.sfhover ul,
.nav li li li li:hover ul, .nav li li li li.sfhover ul { left:auto; }


/* category navigation indicator */
.nav .sf-sub-indicator { display:none; }
.nav li ul .sf-sub-indicator { background:url(images/icon-arrow-right.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }

Code (markup):

My header.php file Code:

<div id="cat-menu">
            
        <?php 
            $catNav = '';
            if (function_exists('wp_nav_menu')) {
                $catNav = wp_nav_menu( array( 'theme_location' => 'header-cats', 'menu_class' => 'nav', 'menu_id' => 'cat-nav', 'echo' => false, 'fallback_cb' => '' ) );};
            if ($catNav == '') { ?>
                <ul id="cat-nav" class="nav">
                    <li class="first"><a href="<?php bloginfo('siteurl'); ?>"><?php _e('Home', 'themejunkie'); ?></a></li>
                    <?php wp_list_categories('title_li=&orderby=id'); ?>
                </ul>
        <?php } else echo($catNav); ?>     
        
    </div>

Code (markup):

Currently my browser showing like this image:
Category still showing there but background is missing



If i changes in #cat-menu {height:90px; } it will show well in small screen but in full browser mode it will so 90px height menu and not looks great. I want that my menu background automatic adjust.