0

我目前在公司网站上工作。我使用负边距和正填充来使页脚和顶栏填充页面的 100% 宽度，即使它们包含在另一个 div 中，包装器设置为大约 65%。据我所知，这是一种相对众所周知的方法，但会导致内容超出页面的两侧。

无论如何，为了防止横向滚动，有 x-overflow: hidden 在 html 和 body 上。这在我使用计算机时有效，但是当我今天向我的同事展示该网站时，它无法正常工作。我将笔记本电脑通过 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 扩展到他们的容器之外，我也很乐意听到这些。提前感谢您的任何意见！

4

2 回答 2

0

我喜欢使用每个部分都有一个外包装和内包装的结构。内部包装将获得固定的宽度，而外部通常会获得 100% 的屏幕。这允许您在不使用负边距的情况下将全宽部分和包含的部分放在一起。

摆弄示例：http: //jsfiddle.net/h0k5pape/2/

代码风格：

<div class="outer">
    <div class="inner"></div>
</div>
于 2014-10-17T19:12:02.440 回答
0 

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>

于 2014-10-17T18:54:50.557 回答