Question

在创建了一些基本的混乱站点之后，我激励自己做得更好并且响应更快。而且我有问题。

问题是当我的网站高度超过100vh时，我需要向下滚动，然后出现水平滚动。

我尝试更改容器的单位，除去左/右填充物，在'reset.css'文件中的某些位置添加margin:0; padding:0;的边距，但我仍然不知道该如何解决。我知道我可以使用溢出，但是我读到它实际上并没有解决而是黑客入侵，我想知道为什么会发生这种情况。

我的网站看起来像这样。不完全是，有点，而且如您所见，水平滑动的空间很小。

示例代码：

.container{
display: flex;
flex-direction: column;
width:100vw;

https://codepen.io/anon/pen/zXLMPX

如果您能给我一些建议/技巧，我也会很高兴，谢谢您！我将来会做得更好！

Answer 1

问题来自您尚未规范化HTML的事实。 HTML自然具有一些填充和边距。您应该几乎始终在项目开始时使用通用选择器将其删除。您也可以直接从html或body标签中将其删除。

这是一个片段，没有删除默认的边距/填充：

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: orange;
}

<div class="container"></div>

以下是使用通用选择器删除边距/填充的代码段：

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: orange;
}

<div class="container"></div>

Answer 2

如果您删除body标签上的边距，则应该删除水平滚动：

body {
   margin: 0;
}

或者，您可以使用overflow-x: hidden始终隐藏水平滚动。

Answer 3

在您的容器上使用 .container { width: 100%; }

问题还可能与Codepen显示页面的方式有关。

如果您想完全禁用水平滚动，则始终可以执行此操作 body { overflow-x: hidden; }

当我需要向下滚动网站时，会水平滚动提示

3 个答案: