jQuery滚动问题，身高100%

我在我的Chrome网站上遇到了一些奇怪的问题，如果我有一个100%jquery页面滚动体，就会停止工作。我无法删除正文高度：100%，因为这是使.header类占页面50%所必需的。Firefox根本不受这个问题的影响。我看过其他类似的问题，但没有帮助

我在这里写了一个测试：

我已经尝试过这些方法让它在chrome中工作，但每一种方法都会阻止其他方法工作：

当前- 页眉占页面的50%（好），但在Chrome中滚动无法工作（坏）

尝试了最小高度：100%而不是车身css中的高度：100%- 这允许在chrome中滚动（好），但会折叠标题（坏）

从位置更改#主容器css：相对；到绝对值- 在展开#侧边栏（单击左上角的“打开”按钮）之前，标题和滚动都有效（良好）。#mainContainer现在可以自由移动，尤其是在移动设备或mac触摸板上（非常糟糕！）。看起来overflow-x好像不起作用了

我试图在没有javascript的情况下完成这项工作。我是在尝试做一些不可能的事情吗

stackoverflow所需的资料

html，正文{
填充：0；
保证金：0；
溢出x：隐藏；
}
html{
身高：100%；
}
身体{
身高：100%；
}
#边栏{
背景：红色；
位置：固定；
身高：120%；
宽度：200px；
}
#主容器{
-webkit转型：转型0.4s轻松，边际0.4s轻松；
-moz转换：转换0.4s易用性，余量0.4s易用性；
背景：蓝色；
z指数：1000；
位置：相对位置；
左边距：70像素；
身高：100%；
}
导航{
宽度：100%；
身高：100%；
背景：紫色；
位置：相对位置；
-webkit过渡：宽度0.4s；
-moz过渡：宽度0.4s；
}
#mainNavCheck:checked~#maincainer{
-webkit转换：translate3d（130px，0，0）；
-moz变换：translate3d（130px，0，0）；
}
#mainNavCheck:未（：选中）~#侧边栏跨距{
颜色：蓝色；
}
.内容{
背景：灰色；
}
.标题{
身高：50%；
背景：石灰；
}
#主导航检查{
位置：绝对位置；
左：-999px；
可见性：隐藏；
}
h1{
填充：0；
保证金：0；
}  
打开
滚动
页眉-浏览器窗口高度的50%
这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。这是大量的文本。








滚动
$（“.click”）。单击（函数（）{
$（'html，body'）.animate（{scrollTop:0}，“slow”）；
});

尝试删除您的

溢出-x:hidden如果可以，请在html元素上移动它，而不是在正文上。
这似乎对我有用。
我想我找到了解决办法

我在整个网站上添加了一个包装，并移动了
overflow:hidden从正文和html到#包装器

然后我将#包装器添加到jQuery选择器中

$(".click").click(function() {
  $('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});

如果有人感兴趣，这里有一个密码笔：

这似乎在Chrome mobile、Chrome desktop和firefox上运行良好。
旧主题，但似乎设置：

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

也应该这样做。我只是不知道如何确保跨浏览器的这种行为：-/
所以你想固定标题并只在正文上滚动？这就接近了！不幸的是，我遇到了这样的问题，即这样做会使#mainContainer通过触摸板移动或通过手机拖动。这给了我一个想法…移除它并添加溢出-x:hidden；移动设备的媒体查询。谢谢！！！到处找这个。如果您有一个需要height:100%和overflow:hidden的父容器，这是web上滚动div顶部的唯一解决方案。谢谢你！！！
$(".click").click(function() {
  $('html, body, #wrapper').animate({ scrollTop: 0 }, "slow");
});

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