我的 html 页面没有在浏览器中滚动答案

【问题标题】：My html page is not scrolling in browsers我的 html 页面没有在浏览器中滚动
【发布时间】：2013-12-01 01:34:00
【问题描述】：

我网站上的页面没有滚动。如果内容多于屏幕无法容纳的内容，则您实际上无法看到它，因为滚动不起作用。我不是 CSS 大师，我不知道问题实际上是 CSS 还是 HTML。

我花了一些时间试图理解这个问题，但我不是 CSS 专家，所以我希望有人能帮助我。该页面正在使用 tweeter-bootstrap 和自定义主题（我没有写）。当我不包含主题 CSS 文件滚动工作正常。

我的主题 CSS 文件的一部分：

body {
    color: #000;
    font-family: 'Play', sans-serif;
    font-size: 16px;
    line-height: 25px;
    background: #e0dbcd url('../images/bg.jpg');
    letter-spacing:0.2px;
    overflow: hidden;
}

【问题讨论】：

Chrome 31.0.1650.57 没问题
@Aperçu 我在 chorme 和 firefox 中尝试过。同样的问题。关闭..需要在其他机器上测试。
请做一个独立的小例子来说明你的问题——你的网站代码将来可能会不一样，所以如果发生这种情况，这个问题将被废弃。
我实际上在 chrome 31.0.1650.48 中尝试过并遇到同样的问题，请在下面查看我的答案。
@Nightfirecat 我肯定会这样做的。感谢您指出。

标签： css html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

按照@Nabbit 的建议从body 中删除overflow: hidden; 或设置overflow: scroll;

已编辑：

overflow 属性控制超出其边界的内容会发生什么。默认情况下，该属性为visible，即内容在其框外进行时不会被剪裁。

overflow: hidden; 表示溢出的内容将被隐藏。

overflow: scroll;这类似于隐藏，除了用户将能够滚动浏览隐藏的内容。

【讨论】：

为了使这个答案更有用，也许您可以解释添加 overflow: scroll 会做什么，以及仅删除 overflow: hidden 的优势是什么。也许添加一些参考文档的链接来解释这些值？
就这么做了。我希望这会有所帮助。

【解决方案2】：

我同意以上所说的，我最近在我的代码中发现的要添加的内容是添加了以下 CSS。

* {
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

这也会干扰 HTML 和正文滚动。因此，我建议在您希望产生效果的特定组件中添加此过渡效果，而不是在 HTML 和正文中。

【讨论】：

【解决方案3】：

对于在我的场景中的人来说，这可能是因为height: 100% for html，body in angular-material.css。删除它，你就可以开始了。

【讨论】：

我真的感谢这篇文章，这可能节省了我 2-3 个小时。
谢谢，删除后溢出：隐藏； & height: 100% from body - 我可以滚动它^^

【解决方案4】：

这可能与任何人无关，但无论如何我都会在这里发表评论 - 我使用的是

pseudo :after

元素在body上，并且已经应用了

position: fixed

在css的某个观点之下，但是我已经提出了

.classname

而不是

.classname:after

在元素上。我将在下面发布 CSS。这样做的目的是修复页面的位置，使其无法滚动。

相关的完整 CSS：

body {
  background-color: #5c2028;
  color: #ffffff;
  min-width: 100%;
  min-height: 100%;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

body.bg{
  background-image: url('../img/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-clip: none;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

    body.bg:after{
    content : "";
    background-image: url('../img/hildasball_7_d_s_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-clip: none;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity : 1.0;
    z-index: -2;

    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    /*width: auto;
    height: auto;*/
}


@media (max-width: 767px) {
  body{
    min-height: 800px;
  }

/* 最初，我把 body.bg 而不是 body.bg:after，这使得事情无法滚动，我最终被搞得一团糟 */

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}

【讨论】：

【解决方案5】：

从 bootstrap-theme.css 文件中的 body 中删除 overflow: hidden;。

【讨论】：

老兄。你为我节省了几个小时。非常感谢！
干杯 Younes，你为我节省了一些时间！
同样...我也不知道发生了什么。除了说谢谢，我唯一的其他评论是“body”中的“overflow: hidden”可能出现在 bootstrap-theme.css 文件之外的其他 CSS 文件中，并导致与我的情况相同的问题。再次感谢。
你的回答简直太棒了。