Question

无论我缩小多远，即使我使窗口远高于屏幕元素，它仍会显示滚动条。我想这可能是因为我的CSS，就在这里：

html,body {
  height: 100%;
}

* {
    -moz-box-sizing: border-box;
}

body {
  background-color: #ededed;
  color: #424242;
  margin: 0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.428571429;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:normal;line-height:1.1;color:#333}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small,.h1 small,.h2 small,.h3 small,.h4 small,.h5 small,.h6 small{font-weight:normal;line-height:1}
h1,.h1{font-size:48px;line-height:52px}
h2,.h2{font-size:36px;line-height:42px}
h3,.h3{font-size:28px;line-height:36px}
h4,.h4{font-size:24px;line-height:25px}
h5,.h5{font-size:20px;line-height:24px}
h6,.h6{font-size:18px;line-height:24px}

h1, p {
  font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

a {
  color:#3282e6;
  text-decoration: none;
}
a:hover, a:focus {
  color:#165db5;
  text-decoration:underline;
}
.row:before, .row:after {
  display: table;
  content: " ";
}

.text-center{text-align:center}

.container {
  margin-left:  auto;
  margin-right:  auto;
  margin-top: 177px;
  max-width: 1170px;
  padding-right: 15px;
  padding-left: 15px;
}

@media screen and (max-width:768px)
{
  .container {
    margin-left:  auto;
    margin-right:  auto;
    margin-top: 60px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
  }
}

#footer {position: relative; z-index: 10; height: 3em; margin-top: -3em; background-color: #EEEEEE}
html, body, .container { height: 100%;}
body > .container { height: auto; min-height: 100%; }

对不起，如果我做了一件非常愚蠢的事，我就是这个东西的菜鸟。

Answer 1

添加html, body { margin: 0; padding: 0; }
从min-height: 100%

body > .container

这应该可以解决你的问题。

当你的容器至少是视口的100％后跟3em高页脚时，你总会有一个滚动条！

Answer 2

您需要替换margin-top:177px 与padding-top:177px 在容器div。

不明白吗？我正在谈论这个。

替换它：

.container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 177px;
    margin-bottom: 30px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}

用这个：

.container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 177px;
    margin-bottom: 30px;
    max-width: 1170px;
    padding-right: 15px;
    padding-left: 15px;
}

我的网站有一个滚动条，无论我缩小它多远

2 个答案: