Question

我尝试了一些解决方法，比如让身高达到100％。但我想知道是否有任何替代方法由语义 - 反应提供。

Answer 1

您正在引用的SUI示例中有一些自定义样式用于实现此功能。您可以在<head>代码中内嵌这些样式。

body {
  background-color: #DADADA;
}
body > .grid {
  height: 100%;
}
.image {
  margin-top: -100px;
}
.column {
  max-width: 450px;
}

Semantic UI React在“Layouts”下实现了所有完全相同的布局。你可以看到login example you reference here。 source for that layout can be seen here。{{3}}。源代码中有一些注释指出了除了简单地设置Grid组件之外所需要的CSS中的一些细节：

<Grid
  textAlign='center'
  style={{ height: '100%' }}
  verticalAlign='middle'
>

您还需要将父容器设置为100％的高度。每次尝试使用窗口的视口高度时都是如此。直到<body>的所有父容器必须定义其高度：

<style>
  body > div,
  body > div > div,
  body > div > div > div.login-form {
    height: 100%;
  }
</style>

显然，对于您的项目，您不希望像示例那样在页面的组件中间抛出这样的样式标记。