html - Forcing DIV to have the same margin on all sides -

i've spent 3 or 4 hours trying understand how "symmetric" div inside html page has not scrollable.

the div must have same margins window on sides , must contain img size should scale according window size maintaining it's ratio.

at following link can find best i've been able do.

as can see div has right margins on left, top , right size not on bottom one! why not? there wrong div style?

<div style="margin: 50px;">

i hope it's quite clear, thank help! :)

edit: since on jsfiddle doesn't appear should i've uploaded image on browser:

enter image description here

edit 2: link last working solution, thank help, in particular dcardoso. :)

you should add body , html tags (doesn't work in jsfiddle) , remove 'overflow: hidden':

position: relative; height: 100%;

and div tag (remove 'margin:50px'):

box-sizing: border-box; /*this allows div padding included in height , width size */ height: 100%; padding:50px;

Script