html - 当我需要向下滚动网站时出现水平滚动

Question

在创建了一些基本的杂乱网站后，我激励自己做一些更好的和响应迅速的事情。我遇到了一个问题。

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

我尝试更改容器上的单位，删除左/右填充，在某些地方添加边距 margin:0; padding:0; 在我的“reset.css”文件中，但我仍然不知道如何修复它。我知道我可以使用溢出，但我读到它实际上不是修复而是黑客攻击，我想知道为什么会这样。

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

示例代码:

.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>