宽度 100% 在body顶部需要滚动

Question

我希望div跨越页面宽度，无论屏幕大小如何。我遇到的问题是，尽管宽度是 100%，但当我查看页面时，它需要水平滚动。我已经查找了解决方案并尝试了有关身体元素的建议，但我仍然有这个问题。这是我的身体和div 元素：

body{
    background-color: #9F6164;
    margin:0px;
    margin-top: .6em;
    width: 100%;
    height: 100%;
    padding:0px;
}
#controlpanel {
    height:8em;
    width:100%;
    background-color:#F8DEBD;
    padding: 1em;
    margin-right: 1em;
    border-bottom: 3px groove black;
    float:center;
    margin: 0 auto;
}

需要明确的是，这不是家庭作业，我这样做是为了一个个人项目。

Answer 1

是的，它是 100% 的宽度，但浏览器还向其添加了 1em 的填充，所以现在是 100% + 1em。您没有设置框大小属性，默认情况下它是内容框。

如果您希望布局的行为更自然，请将以下内容添加到代码中：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

在这里检查：https://jsfiddle.net/avyxhfcp/

顺便说一句：没有"浮点：中心";

Answer 2

您可以使用

overflow-x 隐藏水平溢出。您也可以使用 overflow:hidden ，但下面的代码专门针对水平滚动条。

body {
    background-color: #9F6164;
    margin:0px;
    margin-top: .6em;
    width: 100%;
    height: 100%;
    padding:0px;
    overflow-x:hidden;  /* hide the horizontal overflow */
}

Answer 3

提供的解决方案 cosmonot 不正确，只会在div 的内容伸展到屏幕外时导致问题，并且您无法再在出现溢出问题时进行故障排除，因为您将无法水平看到滚动条。

真正的问题是您的div 使用 width：100% 来占据整个可用的水平空间，然后添加您指定为额外的填充，这导致整体宽度超过 100%，这打破了身体元素溢出，从而使它能够水平滚动。

解决方案

不是改变你身体的溢出属性，解决方案是将盒子大小：border-box; 应用到你的控制面板div。这将使您指定的宽度包括您指定的填充和边距。

例

#controlpanel {
    height:8em;
    width:100%;
    background-color:#F8DEBD;
    padding: 1em;
    margin-right: 1em;
    border-bottom: 3px groove black;
    float:center;
   margin: 0 auto;
}

以后尽量不要玩弄身体，通常需要解决的是你放入的东西。