Fancybox: 100% width -100px

Question

I'm currently trying to find a way to display FancyBox over the whole width of my screen with a 100px margin on the left. I tried this

jQuery

$(document).ready(function() {
    $(".fancybox").fancybox({
     'width': '100%'         
 });
});

and CSS

.fancybox-wrap {
position: absolute;
left: 100px;
}

Ok, this works fine, but now i have a horizontal scrollbar in my browser that is caused by the 100 percent + 100px width.

What I'm wondering now, is there a way to get the 100 percent browser width minus 100px? I tried this, but it didn't work:

jQuery

$(document).ready(function() {
   $(".fancybox").fancybox({
   'width': (100% - 100) + "px"      
   });
});

Would be great if anyone could provide some working lines of code, I totally suck at coding. TY.

Answer 1

Without editing any css, fancybox provides you the options

$(".fancybox").fancybox({
    width: "100%",
    margin: [0, 0, 0, 100] // top, right, bottom, left
});