我目前在公司网站上工作。我使用负边距加上正填充来使页脚和顶部栏填充页面的 100% 宽度，即使它们包含在另一个 div 中，包装设置为大约 65%。据我所知，这是一种相对广为人知的方法，但会导致内容超出页面的两侧。
无论如何，为了防止横向滚动，x-overflow: 隐藏在 html 和正文中。当我在我的电脑前时，这是有效的，但当我今天向我的同事展示该网站时，它不起作用。我通过 HDMI 电缆将我的笔记本电脑连接到一台大电视，并且能够滚动到侧面(没有滚动条，只能使用三键鼠标)。回到我的正常设置(连接第二台显示器的同一台笔记本电脑)，我无法再滚动。
代码是这样的:
HTML
<div id="wrapper">
<div class="extend">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
CSS
html {
overflow-x: hidden;
}
body {
overflow-x: hidden;
}
.extend {
padding-left:35%;
margin-left:-35%;
padding-right:35%;
margin-right:-35%;
}
#wrapper {
width:65%;
margin:0 auto;
}
这对我来说不是什么大问题(除非我发现它在更多情况下会发生)。我怀疑我的网站会经常在连接到笔记本电脑的大电视上查看，但我很好奇是什么原因造成的。或者，如果有人有任何更好的方法将 div 扩展到他们的容器之外，我也愿意听听这些。提前感谢您的任何意见!
最佳答案
body {
margin: 0;
padding: 0;
}
#wrapper {
width:65%;
margin:0 auto;
}
.extend {
/* 35/65*100 = 26.92 */
margin-right:-26.92%;
margin-left:-26.92%;
background-color: red;
}
.extent-content {
width:100%;
padding:10px;
}<!DOCTYPE html>
<html>
<head>
<title>Full width example</title>
</head>
<body>
<div id="wrapper">
<div class="extend">
<div class="extent-content">
This is the div extending beyond the page and causing sideways scroll.
</div>
</div>
</div>
</body>
</html>关于html - 仅当通过 HDMI 电缆连接到电视时，使用负边距的 Div 扩展过去的容器 div 具有 x 滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26431447/