html - 分区 : full header without horizontal scrolling (neither with arrow keys)

Question

很久以前我就开始了一个新的主页元素。我已经学会了自己建立一个主页，所以我还在学习过程中。因此，有可能我选择了有时不是最佳的实现方式。

我想在我的网页上有一个全宽的页眉(和页脚)。为此，我创建了一些如下所示的 div 标签:

.header_container_overall-1 {
	height: 90px;
	width: 1000px;
	padding-left: 1000px;
	margin-left: -1000px;
	padding-right: 1000px;
	background-color: #f1f1f1;
}

现在的问题是，浏览器(或移动设备)显示水平滚动条。我在一篇文章中读到，我可以使用“overflow-x: hidden;”。我将这段代码应用到我的 css 文件的“body”类中。水平滚动条消失了，但您仍然可以使用键盘上的箭头键向右滚动。 不幸的是，我在知道这个错误的情况下一直在对我的网站进行编程(我想我稍后会修复这个问题，但我认为这不是最好的主意)。但是，我现在回到这个错误并试图修复它。我发现了几个线程，其中发生了同样的问题:

kennykee.com/118/div-100-width-without-horizo​​ntal-scroll-bar/

stackoverflow.com/questions/18274386/div-overflow-is-hidden-but-still-can-scroll-using-keyboard-right-arrow-key

然后，我尝试了以下步骤:

• 添加“溢出-x:隐藏；”到几个类(尤其是页眉和页脚类)，目的是防止水平滚动。我尝试了几种选择，最后我得到了一个网站，其中页眉和页脚在正文处被剪掉了(例如，我的宽度为 1000 像素，而不是全宽)。

• 当我尝试使用“position: relative;”时或“位置:固定；”在不同的类(class)中，我最终将主页(现在由于 margin-left 和 margin-right 设置为“auto”而居中)设置在左侧。

希望您能理解我的意思。很难描述，更不用说我糟糕的英语了；-)。正如你所看到的，我有时甚至不知道我在做什么就尝试了一些东西。这是越来越多的“尝试和错误”，我现在来到了 desicion，我的 html 和 css 知识已经结束，无法解决这个问题。也许您现在可以看到问题，或者您有想法，我可以尝试做什么。

存在所述错误的网站位于: http://www.airlink.ch

css 文件也可用: http://www.airlink.ch/stylesheets/layout.css

如果您需要任何进一步的信息，请告诉我。很抱歉这么长的解释。

最好的问候

Answer 1

除了你的 CSS，我没有进一步阅读这篇文章。很抱歉，您不应该使用 padding 1000 PX 和 margin 1000px 之类的技巧。如果您想要一个全宽的 div，请将 HTML 和 body 元素设置为 width: 100%。然后将宽度 100% 添加到页眉/页脚 div。确保为 width = device width 添加 meta viewport 标签。您应该快速搜索一下有关设备宽度和响应式设计的一些资源。

希望你能得到你想要的工作!