Question

我想要一个div来跨越页面宽度，无论一个屏幕的大小。我遇到的问题是虽然宽度是100％，但当我查看页面时，它需要水平滚动。我查找了解决方案并尝试了有关body元素的建议，但我仍然有这个问题。这是我的身体和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。您没有默认设置box-sizing属性及其内容框。

如果您希望布局更自然，请将其添加到您的代码中：

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

在此处查看：https://jsfiddle.net/avyxhfcp/

BTW：没有＆＃34; float：center;＆＃34;

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使用宽度：100％占用可用的整个水平空间，然后在你指定为额外的填充上添加，这导致整体宽度超过100％，这突破了身体元素溢出，从而使其水平滚动。

解决方案不是改变你的身体的溢出属性，解决方案是应用box-sizing：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;
}

将来尽量不要随身携带，通常是你需要进行排查的内容。

身体顶部宽度100％需要滚动

3 个答案: