Css溢出自动选项让我烦恼

Question

我刚刚完成my first web layout，我的容器似乎在#wrapper下面添加了滚动条。真的不知道这一切的原因。似乎在Firefox和IE中可见。不了解别人。

有问题的滑块

包装器的CSS代码

#wrapper {
   background:#383434;
   width:1000px;
   height:auto !important;
   min-height:100%;
   overflow:hidden;
   height: 100%;
   -moz-box-shadow: 0 2px 15px 5px #000;
   -webkit-box-shadow: 0 2px 15px 5px#000;
   box-shadow: 0px 2px 15px 5px #01DF01;
   margin-top:20px;
   border-radius:5px;
   margin-bottom:50px;
}

Answer 1

删除/修改overflow:auto;可以解决问题。我认为hidden正是您所寻找的。

如果你看at the documentation，你可以找到不同的值实际上做了什么：

  

<强>可见
  默认值。内容未被剪裁，可能会在内容框外呈现。

     

<强>隐藏
  剪辑内容并且不提供滚动条。

     

<强>滚动
  内容被剪切，桌面浏览器使用滚动条，无论是否剪切任何内容。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出的内容。

     

自动
  取决于用户代理。如果内容溢出，Firefox等桌面浏览器会提供滚动条。

Answer 2

overflow: auto表示如果内容溢出则显示滚动条，这种情况在您的情况下会发生。也许你想要的是overflow: hidden，它不会显示任何滚动条。在您的网站中，这似乎有效。

另一种选择是追捕那些有大小溢出容器并收缩它的东西。

Answer 3

您可以将overflow-x: hidden添加到#wrapper。

的样式中

修改

我发现#middle样式的边距导致出现水平滚动条。放置margin-top: -55px并清除margin属性可以解决问题。