花式框：100% 宽度 -100px答案

【问题标题】：Fancybox: 100% width -100px花式框：100% 宽度 -100px
【发布时间】：2014-01-31 00:51:53
【问题描述】：

我目前正在尝试找到一种方法来在屏幕的整个宽度上显示 FancyBox，并在左侧留出 100 像素的边距。我试过这个

jQuery

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

和CSS

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

好的，这很好，但现在我的浏览器中有一个水平滚动条，这是由 100% + 100px 宽度引起的。

我现在想知道的是，有没有办法让 100% 的浏览器宽度减去 100 像素？我试过了，但没有用：

jQuery

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

如果有人能提供一些工作代码行，那就太好了，我完全不擅长编码。泰。

【问题讨论】：

【解决方案1】：

无需编辑任何 css，fancybox 为您提供选项

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

【讨论】：

...最舒适的解决方案。
@Ela：究竟是什么：边距还是宽度？
我发现在 fancybox 2.0 中你还需要添加 "autoSize: false" 才能使宽度起作用。即使这样，弹出窗口也不会占用整个空间并留下大约 20 像素的边距。
@Ela 这个答案在 OP 的上下文中有效，但它可能因情况而异....您可能还需要将 fitToView 设置为 false 以处理花式框尺寸你自己。更多信息请查看stackoverflow.com/a/16273620/1055987

【解决方案2】：

我不知道这个花式框的底层 HTML，但如果你将 CSS right 属性设置为零，width 到 auto 和 left 到 100px 你应该得到它。

【讨论】：