Question:

I try to create an overlay-div, which covers the whole screen - except 3em to the bottom. I think my attempt is not the optimum:

<div id="background"></div> <div id="overlay"></div>

<strong>CSS:</strong>

#background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; }

With that, I want to slide up and down the overlay. But with the css above, I don't know how to animate completely as '-55em' are too much on lower screen resolution or not enough on higher resolution:

<strong>JS:</strong>

$('#overlay').animate({'top':'-55em'}, 1000, function() { $('#overlay').animate({'top':'-3em'}, 1000); });

i think you should change height instead of top it will save you from typical calculations

<pre class="snippet-code-js lang-js prettyprint-override">$('#overlay').animate({'height':'0%'}, 1000, function() { $('#overlay').animate({'height':'100%'}, 1000); }); <pre class="snippet-code-css lang-css prettyprint-override"> #background { background-color: #ddd; width: 100%; height: 100%; } #overlay { position: absolute; height: 100%; background-color: #fff; width: 100%; top: -3em; -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.3); z-index: 1; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="background"></div> <div id="overlay"></div>