语义UI：为什么身体不是相同的视口大小？ [英] Semantic-UI: Why is the Body not the same viewport size?

问题描述

请查看我使用Semantic-UI构建的 Hello World应用程序。

我经常使用Semantic-UI，我比Bootstrap更喜欢它，但我已经注意到这个边缘的一致性问题。这个视口有一些额外的边距，注意网页的底部（空白处）和网页的右边（更多的空白处）。

我一直在尝试将 html / body 的宽度/高度设置为 100％ code>，无济于事。

这是一个语义UI问题，还是其他一般问题？任何建议，以纠正这种CSS？

解决方案

这是因为 ui网格由于负余量而将区域内的内容拉出的属性。尝试将其设置为0。

  .ui.grid {
 margin：-1rem; //更改为0 
} 
  

最佳做法是将ui网格包裹在容器。我不确定为什么.container CSS代码在您的网站中缺失，但它们在Docs中有。

语义UI文档 网格包裹在.main.container中，其宽度设置为

Please take a look at my Hello World-esque application, built with Semantic-UI.

I frequently use Semantic-UI, I like it more than Bootstrap, but I have noticed this consistent issue at the edges. The viewport has some sort of excess margin, notice the bottom of the webpage (blank space), and the right of the web page (more blank space).

I've been experimenting with setting the width/height of html/body to 100%, to no avail.

Is this a Semantic-UI issue, or something else in general? Any suggestions to correct this CSS?

解决方案

It is because of the ui grid property which pulls content outside its area due to negative margin. Try setting it to 0.

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

The best practice is to wrap the ui grid inside a container. I am not sure why .container CSS code is missing in your site but they have it in Docs.

Semantic UI Docs The grid is wrapped inside .main.container which has a width set.

这篇关于语义UI：为什么身体不是相同的视口大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！