html - How to make div fixed and with margin? -

i want make footer website, , want fixed (always in botton). it's working , looking fine, when content full, it's not showing margin-top gave it. please help, need way give fixed div - margin-top... thanks.

code:

<div style="width: 100%; height: 100px; margin-bottom: 50px; background: red;">  </div> <div style="width: 100%; text-align: center;">     example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br />example of full div<br /> </div> <div style="width: 100%; height: 50px; margin-top: 50px; background: blue; position: fixed; bottom: 0;">  </div> 

jsbin demo

place fixed height div below blue 1 using z-index. result in white "margin" showing above blue. reason margin not affecting page position: fixed elements not affect page flow.

<div style="width: 100%; height: 100px; background: white; position: fixed; bottom: 0;z-index:1"></div> <div style="width: 100%; height: 50px; background: blue; position: fixed; bottom: 0;z-index:2"></div>