Semantic-UI：为什么Body的视口大小与实际视口大小不同？

Question

请查看我使用Semantic-UI构建的类似Hello World的应用程序：https://verumdesigns.com。

我经常使用Semantic-UI，比Bootstrap更喜欢它，但我注意到在边缘处存在一个一致的问题。视口有某种多余的边距，请注意网页底部（空白空间）和网页右侧（更多空白空间）。

我一直在尝试将html/body的width/height设置为100％，但无济于事。

这是Semantic-UI的问题还是其他一般问题？有没有建议可以纠正这个CSS？

- ilrein

---

ilrein，我已经更新了我的回答，请检查最后三行。 - m4n0

Answer 1

这是因为ui grid属性由于负边距将内容拉出其区域。尝试将其设置为0。

.ui.grid {
  margin: -1rem; // Change to 0
}

最佳实践是将 UI 网格包裹在容器中。我不确定为什么你的网站缺少 .container CSS 代码，但在文档中有提到。

Semantic UI 文档 网格被包裹在 .main.container 中，并设置了宽度。

- m4n0

---

最佳实践是将UI网格包装在容器中。我不确定为什么您的站点缺少.container CSS代码，但它们在文档中有提供。这就是帮助我的方法。在网格周围添加一个容器以解决与边距相关的问题。谢谢。 - m01010011

Answer 2

问题出现是因为“ui grid”的默认边距。 要解决这个问题，只需向“ui grid”元素添加“padded”类。 就像这样：

<div class="ui grid padded">
  <!-- your columns -->
</div>

- ikourfaln

Answer 3

如果你设置了

 .ui.grid {margin:0}

它会工作

- maioman

---

做这件事的最佳实践是什么？显然，它存在是有原因的，我不想覆盖核心语义代码，并且必须处理每个我使用的网格，只为了让我的主页看起来好。 - ilrein

你可以在容器div上设置overflow: hidden。顺便说一下，语义化有其特定的类来进行这些修改，但是为了快速解决问题，你可以使用内联样式或创建一些自定义CSS（这从来不会有坏处）。 - maioman

这个问题对应的具体类是什么？ - ilrein

Answer 4

正如Manoj所提示的，主网格的解决方案根据docs为准。

<div class="ui grid container">
  <div class="four wide column">
    <!-- ... -->
  </div>
  <!-- ... -->
</div>

- Simon H