Detecting Screensize and changes percentages in div padding

Question

I'm currently tweaking the percentages in my padding top and bottom of my divs (MENU and ABOUT), so that they each fill a page. It looks great on my screensize, however when it goes to different screen, the content does not fit within the page. Is there any way to detect the screensize and change the percentages?

HTML:

<div id="menu">
                    <p class="menu_info">
                        The food at Cure is inspired by the season’s best produce, gathered by a variety of local and global artisans. These seasonal flavors are crisply paired with a sharp drinks list which includes a reserve wine list of hard to source vintage wines for connoisseurs.
                    </p>

                    <div id="month_menu">

                        <p id="month">OUR JULY MENU</p>

                        <div>
                            <p id="lunch">LUNCH</p>
                            <div class="courses">
                                <p><a href="menu/cure_menu_july_lunch.pdf" target="_blank">2 course/3 course</a></p>
                            </div>
                        </div>

                        <div>
                            <p  id="dinner">DINNER</p>
                            <div class="courses">
                                <p>mon-thurs:</p>
                                <p><a href="menu/cure_menu_july_4course.pdf" target="_blank">4 course</a></p>
                            </div>
                            <div class="courses">
                                <p>fri & sat:</p>
                                <p><a href="menu/cure_menu_july_5course.pdf" target="_blank">5 course</a></p>
                            </div>
                        </div>

                    </div> 


        <div id="about">
            <p class="about_header">OUR RESTAURANT</p>
            <p class="about_info">Cure, which in Latin (curare) stands for hospitality or “to take care of”, is headed by Chef-Owner Walsh, who has conceptualized a creative space where a seamless experience of top-notch food, drink and service is delivered in a casual yet refined environment.  Cure seats 40, including a chef’s table of eight, within the 1,350 sq ft shophouse space.</p>
             <p class="about_info" style="text-indent:25px;">It integrates his influences and inspirations from his many years of cooking in acclaimed Michelin star kitchens across Dublin, London and New York, and his firm belief in going back to the basics of hospitality: striving to take care of guests in the best way possible by offering them the best food, drink and service experience in an accessible and personable way.</p>
        </div>

CSS:

#menu{
    padding-top:20%;
    padding-bottom:20%;
}

#about{
    padding-top:22%;
    padding-bottom:22%;
}

Answer 1

You should use jquery to handle changes according to the screen size. There are two useful methods which becomes handy.

$(window).height(); //returns the height of the window
$(window).width(); //returns the width of the window

You can check the screen size and change the padding of your div's dynamically on a page load (Trial and error will work best). Also you can change the padding (or whatever) when the window resizes. So that your page looks good even when the user resizes the window.

$(window).resize(function() {
//this code will be executed when the window is re-sized
});

You can use the .css() to change the css property of an element as given here .

Answer 2

You should try using vh CSS unit, which uses viewport height.

If you need cross browser compatibility:

Try this:

    (function( $, window ){

  var $win = $(window)
      , _css = $.fn.css;

  function viewportToPixel( val ) {
    var percent = val.match(/\d+/)[0] / 100,
      unit = val.match(/[vwh]+/)[0];
    return (unit == 'vh' ? $win.height() : $win.width()) * percent + 'px';
  }

  function parseProps( props ) {
    var p, prop;
    for ( p in props ) {
      prop = props[ p ];
      if ( /[vwh]$/.test( prop ) ) {
        props[ p ] = viewportToPixel( prop );
      }
    }
    return props;
  }

  $.fn.css = function( props ) {
    var self = this,
        update = function() {
          return _css.call( self, parseProps( $.extend( {}, props ) ) );
        };
    $win.resize( update );
    return update();
  };

}( jQuery, window ));

$('div').css({
  height: '50vh',
  width: '50vw',
  marginTop: '25vh',
  marginLeft: '25vw',
  fontSize: '10vw'
});

Working demo: http://jsbin.com/izosuy/1/edit?js,output

Works well in IE8 as well!

Read this topic for more info: Is there any cross-browser javascript for making vh and vw units work

Answer 3

javascript could do it.

with window.innerWidth and window.innerHeight you can retrive the size (in pixel) of the visible area of your site.

then you do your funky calculations to determin your padding. And submit it with:

document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'%; padding-bottom:'+varBot+'%');    

mind that you can also use "px" as unit instead of "%" and set the 'padding-top:123px;'

put together it could look something like this:

<script>
setPadding();

function setPadding() {
    var varTop, varBot;
    varTop = window.innerHeight; //your calculations here
    varBot = window.innerHeight; //
    document.getElementById('menu').setAttribute('style', 'padding-top:'+varTop+'px; padding-bottom:'+varBot+'px;');
}
</script>

you then should call the function setPadding whenever the window is resized (see the other answer for that).