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”类中。水平滚动条消失，但您仍然可以使用键盘上的箭头键向右滚动。不幸的是，我一直在编程我的网站，知道这个错误（我想，我稍后会修复它，但我认为，这不是最好的主意）。但是，我现在回到这个bug并尝试修复它。我找到了几个线程，其中出现了同样的问题：

kennykee.com/118/div-100-width-without-horizontal-scroll-bar /

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

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

添加“overflow-x：hidden;”到几个类（特别是页眉和页脚类），目的是防止水平滚动。我尝试了几个选项，最后，我得到了一个网站，其中页眉和页脚被剪切在主体上（例如我的宽度为1000px而不是全宽）。
当我尝试使用“position：relative;”时或“位置：固定;”在不同的课程中，我最后说，主页面（现在由于margin-left和margin-right设置为“auto”而居中）设置在左侧。

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

具有所述错误的网站可在以下网址获得： http://www.airlink.ch

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

如果您需要任何进一步的信息，请告诉我。对此长篇解释感到抱歉。

祝你好运

Answer 1

我没有比你的CSS更多地阅读帖子。对不起，你不应该使用填充1000 PX和1000px边缘的黑客。如果需要全宽div，请将HTML和body元素设置为width：100％。然后将100％的宽度添加到页眉/页脚div。确保为width = device width添加元视口标记。你应该快速谷歌一些有关设备宽度和响应式设计的资源。

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

Div：没有水平滚动的完整标题（不带箭头键）

1 个答案: