Jquery 当绝对元素可见但保持居中时，为页面内容添加边距

我有一个页面的内容是中心

宽度：980px；保证金：0自动。我添加了一个侧栏（显示/隐藏），它是绝对定位的，我不希望它与内容重叠。我一直在尝试各种方法来解决这个问题，通过在内容中添加填充和边距等，但没有任何效果，因为它当前将内容向左拉，而内容仍应保持居中

JSFIDLE

预期结果：
内容始终以页面大小为中心，当页面窄到足以被侧边栏阻挡时，页面内容应位于侧边栏旁边。
您需要的是：

#inner {
width: 100%;
}

但是，随后内容将显示在屏幕右侧

这似乎是可行的，但可能不是在所有浏览器上都有效：

#inner {
width: 100% -100px;
}

最好在toggleClass（）上调整#内部宽度
只需使边栏浮动即可。删除“调整”类

喜欢吗？
一种方法是检查内部div的左边距是否小于侧边栏的宽度，然后只添加类adjust

#custom-sidebar {
    background: yellow;
    width: 100px;
    height:300px;
    /*position: absolute;*/
    float: left;
}

#inner.adjust {
    /*margin: 0 0 0 122px;*/
}

$('#custom-sidebar').on('click', function () {
    var margin_left = $('#inner').css('margin-left');
    var left_width = parseInt(margin_left.replace('px', ''));
    var sb_width = $('#custom-sidebar').width();
    $(this).toggleClass('hide');
    console.log(margin_left);
    console.log(left_width);
    console.log(sb_width);
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        if (left_width <= sb_width) {
            $('#inner').addClass('adjust');
        }
    }
});

$（“#自定义侧边栏”）。在（'click'，函数（）{
var margin_left=$（'#inner'）.css（'margin-left'）；
var left_width=parseInt（边距_left.replace（'px'，''）；
var sb_width=$（'#自定义边栏'）.width（）；
$（this.toggleClass（'hide'）；
控制台日志（左边距）；
控制台。原木（左_宽度）；
控制台日志（sb_宽度）；
if（$（this）.hasClass（'hide'））{
$（“#内部”）.removeClass（'adjust'）；
}否则{
如果（left_width您非常接近。您需要在中添加媒体查询以防止“捕捉操作”

演示

就我个人而言，我会使用calc（），它适用于除Opera Mini之外的所有浏览器：在您的示例中，内容总是100%宽。我需要它440px宽且居中。它仍然与页面重叠。此外，考虑到当前标记的复杂性，我确实需要使用position absolute。fiddle是一个简化版本。谢谢。如果您希望在window足够宽，当窗口太窄时，您可能需要一个脚本来调整对齐方式。当屏幕变窄时，它与内容重叠，但谢谢。这个问题让很多人感到困惑，很高兴我不是唯一一个。
$('#custom-sidebar').on('click', function () {
    var margin_left = $('#inner').css('margin-left');
    var left_width = parseInt(margin_left.replace('px', ''));
    var sb_width = $('#custom-sidebar').width();
    $(this).toggleClass('hide');
    console.log(margin_left);
    console.log(left_width);
    console.log(sb_width);
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        if (left_width <= sb_width) {
            $('#inner').addClass('adjust');
        }
    }
});

@media (max-width: 718px) {
    .adjust #inner {
        margin: 0 0 0 122px;
    }
}