Question

我有一个内容为width: 980px; margin: 0 auto;的页面。我正在添加一个侧栏（显示/隐藏），它是绝对定位的，我不希望它与内容重叠。我一直在尝试各种方法解决这个问题，通过在内容中添加填充和边距等，但没有任何结果，因为当它仍然保持居中时，它会将内容拉到左边。

JSFiddle http://jsfiddle.net/x06c3ysf/

$('#custom-sidebar').on('click', function () {
    $(this).toggleClass('hide');
    if ($(this).hasClass('hide')) {
        $('#inner').removeClass('adjust');
    } else {
        $('#inner').addClass('adjust');
    }
});

// run on page load
if ($('#custom-sidebar').hasClass('hide')) {
    $('#inner').removeClass('adjust');
} else {
    $('#inner').addClass('adjust');
}

期望的结果：内容始终以页面调整大小为中心，当页面足够窄以便被侧边栏阻挡时，页面内容应位于侧边栏旁边。

Answer 1

你需要的是：

#inner {
width: 100%;
}

然而，内容属于右侧的屏幕。

这似乎有效，但可能不适用于所有浏览器：

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

更好地调整toggleClass（）

上的#inner宽度

Answer 2

只需让侧边栏浮动即可。删除课程＆＃34;调整＆＃34;

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

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

你喜欢它吗？

Answer 3

这样做的一种方法是检查内部div的左边距是否小于侧边栏的宽度，然后只添加类调整

$('#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');
        }
    }
});

Demo Fiddle

Answer 4

你非常接近。您需要添加媒体查询以防止“捕捉操作”

DEMO http://jsfiddle.net/x06c3ysf/7/

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

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

4 个答案: