2

我有这个 CSS 布局，它在 Firefox/Opera 甚至 Safari 中都可以正常工作，但在 Chrome 中的行为略有不同。

我有通常的：

* { margin: 0; padding: 0; }

html, body { height: 100%; }

div#container {
    min-height: 100%;
    width: 1000px;      /* giving the page a fixed width */
    margin: 0 auto;     /* centering the page */
    position: relative; /* making the footer stop when it meets the content */
}

现在，一切正常，除非我在 Chrome 中刷新页面。在所有其他浏览器中，当我刷新页面时，内容会自行调整，并且（如果页面的高度不小于内容的最小高度）我不必向下滚动即可查看整个页面。在 Chrome 中，当我刷新页面时，页面变得比屏幕大，我必须向下滚动才能看到所有内容。请注意，内容不应该是问题，因为它不超过主要部分的高度。

HTML 布局基本上是：

<body>
    <div id="container">

        <header>stuff...</header>

        <section id="page_content">stuff...</section>

        <footer>stuff...</footer>
    </div>
</body>

而且，如果它可以帮助，主要内容的 CSS 是：

section#page_content {
    height: 100%;       /* pay attention: height is actually handled */
    min-height: 400px;  /* by the jQuery code, which resizes it dynamically */
    max-height: 1000px;
    width: 802px;
    margin: 0 auto;
    display: block;
    overflow: auto;
}

每次调整页面大小和加载页面时都会调用此 JS 函数：

function resizeMainSection() {
    var finalHeight = $(window).height()
        - $('footer#page_footer').outerHeight(true)
        - $('header#page_header').outerHeight(true) // a simple div to stop the footer from going over the content when resizing
        - $('div#footer_stopper').outerHeight(true);
    var mainSection = $('section#page_content');

    if (finalHeight < mainSection.css('min-height')
        || finalHeight > mainSection.css('max-height')) return;
    $(mainSection).height(finalHeight);
}

可能的原因是什么？

编辑

我注意到只有当我刷新页面时（通过Cmd+R或通过刷新按钮）我才会遇到这个问题。如果我将相同的 URL 重新插入浏览器并单击Enter布局样式正确。因此，正如评论中有人建议的那样，这可能是缓存问题。

4

1 回答 1

0

我认为更好的脚本是将结尾从

if (finalHeight < mainSection.css('min-height')
    || finalHeight > mainSection.css('max-height')) return;
$(mainSection).height(finalHeight);

至：

if (finalHeight < mainSection.css('min-height') 
    finalHeight = mainSection.css('min-height');
if (finalHeight > mainSection.css('max-height')
    finalHeight = mainSection.css('max-height');
$(mainSection).height(finalHeight);

也就是说，高度是一个受最小值和最大值约束的值。如果计算值低于最小值，则适当的操作是将其设置为最小值，而不是退出脚本

于 2013-05-25T11:07:59.423 回答