Question

我正在努力的设计网站。

我基本上有标签内容，左边是标签（垂直），右边是内容。

我有一个较小屏幕尺寸的媒体查询，更改内容的宽度。因此，当包含内容的文章宽度较小时，它们会自动增加高度，这是我所期望的，也是我想要的。

我有一个脚本可以检查每篇文章的高度，并将所有其他文章与“最高”文章的高度相匹配。（我们不希望每次有人点击不同的标签时都会调整框大小，这就是为什么要为所有标签设置高度的原因）

以下是问题：

当resize事件在窗口上触发时，我运行相同的函数来计算高度并将文章与该高度匹配，但$el.height();返回的文章高度与之前的窗口大小相同（在调整大小事件之前）烧制）。

任何人都知道这是为什么？

请注意，在下面的代码示例中，您可能会注意到一些奇怪的情况，这只是因为这些代码段是更大的对象和应用程序的一部分。

function calculateHeight() {
    $el.find('article').each(function() {
        // height does not work correctly when display is none
        var elHeight = $(this).css({
            position: 'absolute',
            visibility: 'hidden',
            display: 'block'
        }).height();


        if (_height < elHeight) { _height = elHeight; }

        // Ok hide it normally again
        $(this).css({
            position: 'relative',
            visibility: 'visible',
            display: 'none'
        });

        elHeight = null;
    });
}

// resize event
$(window).resize(function() {
    /* FIXME: There is a bug here, resize is not working correctly */
    _height = 0;
    calculateHeight();
    setCalculatedSliderHeight();
});

Answer 1

我发现了问题，我无法相信我错过了。该脚本第一次运行，当然它为所有文章设置了手动高度。对.height()的任何后续调用都将返回已设置的高度。

我需要做的就是将calculateHeight（）函数的第一部分更改为：

function calculateHeight() {
    $el.find('article').each(function() {
        // height does not work correctly when display is none
        var elHeight = $(this).css({
            position: 'absolute',
            visibility: 'hidden',
            height: 'auto',  // Reset the height
            display: 'block'
        }).height();

...

响应式设计：在窗口调整大小时未更新Div高度

1 个答案: