Question

问题

我有两列：第一列有响应宽度，而另一列有固定宽度。我正在使用需要响应列宽度的插件，然后我使用此函数来计算宽度：

$(".container-content").css(
        "width",
        $(".site-container").outerWidth() - $(".sidebar").outerWidth()
    );

但是当页面加载时，宽度不正确，我必须调整窗口大小以获得固定的宽度。

我的一些代码

CSS

.site-container {
    width: 98%;
    background-color: #fff;
    box-shadow: #b8b8b8 0 2px 3px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.container-body .container-content {
    overflow-y: hidden;
    position: relative;
}

如果您需要更多信息，请告诉我。

更新v1

我相信我们更接近解决我的问题。我在我的应用程序上有Isotope来创建马赛克。页面加载时，将调用Isotope。我的马赛克结构是：ul＆gt; li。在CSS上，li定义为display: none，只在页面加载器消失后显示镶嵌列表。

当jQuery显示li的内容（使用fadeIn()）时，我认为他没有正确计算宽度（或不完全）。

按照代码：

// Isotope
jQuery("ul.products-list").isotope({
    itemSelector: "li",
    masonry: {
        gutterWidth: 15
    }
}, function () {
    $(this).parent().prepend("<div class=\"products-loader\"><p>Loading application</p></div>");
    $(".products-loader").delay(1000).fadeOut(300, function () {
        $("ul.products-list li").fadeIn("slow", function () {
            $(".products-loader").remove();
            $(".container-content").perfectScrollbar({
                wheelSpeed: 100
            });
        });
    });
});

有什么想法吗？

更新v2 - 我解决了！

看我自己的答案。

Answer 1

解决方案是从display: none;切换到opacity: 0;。

我找到了解决方案here。

谢谢大家！

Answer 2

首先想到的是：

你应该确保在DOM准备就绪时运行你的jQuery代码：

$('document').ready(function(){
    $(".content-container").css("width", $(".site-container").outerWidth() - $(".sidebar").outerWidth());
});

或者至少在它引用的html之后（在某些情况下可能不起作用）。

如果您希望获得outerWidth()的组件的大小取决于ex：images，那么必须加载，那么即使上述也是不够的。然后，您必须将代码放在window.load处理程序中。

$(window).load(function() {
    /* your code*/
}

简而言之：当DOM准备就绪时触发document.ready，而不是window.load，当页面上的所有内容都已加载时触发.content-container [JS] <> .container-content [CSS]。参考阅读here或here

旁注：注意到差异：

{{1}} 这是打算吗？

调整大小时，div的宽度恢复正常

问题

我的一些代码

更新v1

更新v2 - 我解决了！

2 个答案: