Question

我正在使用以下布局的网站上工作：

<html>
    <head></head>
    <body>
        <div id="left"></div>
        <div id="main"></div>
    </body>
</html>

以下CSS：

* {
    box-sizing:border-box;
}
html,
body {
    height:100%;
    margin:0;
    padding:0;
}
html {
    overflow:hidden;
}
body {
    overflow:auto;
}
#left,
#main {
    min-height:100%;
    float:left;
}

CSS的其余部分并不重要，但请放心，我要清除浮动等等。布局看起来完全符合我的要求。

提供的CSS的目的是使#left和#main最小化窗口的高度，但如果任何一个变大，页面将随之增大。这是按预期工作的。

问题在于我需要在我的JavaScript中使用Y滚动位置，但身高的高度：100％和overflow：auto的组合导致body的scrollTop属性始终为0。

如果任何人有JavaScript替代方案或小的CSS更改来解决这个问题，那就太棒了。我宁愿避免更大的CSS更改，但它们仍然可能有用。

谢谢！

Answer 1

在Firefox上测试过，这不是问题。我认为这是Chrome的一个错误，我正在报告它。不知道解决方法，怀疑是否存在。

编辑：叹息，似乎也是Safari中的一个问题。

Answer 2

对不起我迟到的解决方案，但我只是像你一样问题。关键是html标签不像其中的任何溢出规则。只需从html中删除任何溢出并放入正文并且它可以正常工作

Answer 3

使用min-height不会破坏滚动功能。（仅在Chrome中测试过）。 100vh似乎也很好。

body, html {
    min-height: 100%;
}

或

body, html {
    min-height: 100vh;
}

Answer 4

在我看来，您可以通过在要始终为窗口高度的元素上使用100vh来解决此错误。

请参阅修改后的jsfiddle。

视口单元并未完全支持，但看起来这样可以在most modern browsers中使用。

Answer 5

实际上@scwcompton，你的答案引导我走上正确的道路，寻求一个好的解决方法。实际情况是，webkit浏览器由于某种原因不会重新绘制页面。

强制重绘为我解决了问题。在我为body元素设置动画之前，我添加了以下代码：

  MLB.BODY = $("#body");
  MLB.BODY.css("display", "none");
  MLB.BODY.height(); // no need to store this anywhere, the reference is enough
  MLB.BODY.css("display", '');


  MLB.BODY.scrollTop(99999);

scrollTop Broken：身高100％，溢出自动

5 个答案: