Question

我再次发帖，因为我无法登录我的旧帐户。我正在使用小型投资组合网页的模板。问题是，当在Chrome中打开网站时，主页上会出现一个滚动条，如下所示：

i.stack.imgur.com/rCB3m.jpg

在Firefox，Edge和IE中不会发生这种情况。 Here是模板演示的链接，here是CSS的小提琴。使用Chrome时，两者都会显示不必要的滚动条。我尝试了以下事项：

将此行添加到html文件中但没有帮助：

.content {
overflow: hidden;
}

添加此行，但它不仅隐藏了主页面上的滚动条，还隐藏了所有子页面。

body{
    overflow-y: hidden;
}

我还删除了部分CSS代码，以找出导致问题的原因。当我删除脚本的这一部分时滚动条消失但我无法找到解决问题的方法：

#wrapper {
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-align-items: center;
        -webkit-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -moz-justify-content: space-between;
        -webkit-justify-content: space-between;
        -ms-justify-content: space-between;
        justify-content: space-between;
        position: relative;
        min-height: 100vh;
        width: 100%;
        padding: 4rem 2rem;
        z-index: 3;
    }

        #wrapper:before {
            content: '';
            display: block;
        }

我希望你们能在这里帮助我。

最佳，杰

Answer 1

您将最小高度设置为100个视口高度，这是您正在查看的屏幕的高度，并为其添加填充。尝试改为98vh。

Answer 2

删除

#wrapper:before { 
  content: ''; 
  display: block
}

...来自CSS以解决滚动条问题。

要保持您的内容垂直居中，请将#wrapper justify-content从space-between更改为center：

#wrapper {
  /* ... */
  -webkit-justify-content: center;
     -moz-justify-content: center;
      -ms-justify-content: center;
          justify-content: center;
  /* ... */
}

更新了fiddle。

滚动条显示在Chrome中，但没有可滚动的内容

2 个答案: