Question

我正在尝试使用特定布局制作Semantic UI React网格全屏。

在我的组件中，我有以下渲染方法：

  render() {
    return (
      <Grid celled>
        <Grid.Row stretched>
          <Grid.Column width={10}>
            <p>One</p>
          </Grid.Column>
          <Grid.Column width={6}>
            <p>Two</p>
          </Grid.Column>
        </Grid.Row>

        <Grid.Row>
          <Grid.Column width={10}>
            <p>Three</p>
          </Grid.Column>
          <Grid.Column width={3}>
            <p>Four</p>
          </Grid.Column>
          <Grid.Column width={3}>
            <p>Five</p>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    );
  }

列的宽度是正确的，但高度不是。这就是上面代码给我的内容：

如何拉伸顶行以适应屏幕的70％而将底部拉伸至剩余的30％？或者如何将顶行设置为600px，将底行设置为屏幕的其余部分？无论哪种方式都适合我。

我尝试给组件一个id并在style.css中将该id设置为100％，但高度不变。

Answer 1

我不认为stretched能做你想做的事。阅读Stretched上的文档，了解他们的示例。

您可以将网格的高度设置为100vh，将第一行的高度设置为70%，将第二行的高度设置为30%。 Here's a jsfiddle example I put together.

render() {
  return (
    <Grid celled padded style={{height: '100vh'}}>
      <Grid.Row style={{height: '70%'}}>
        <Grid.Column width={10}>
          <p>One</p>
        </Grid.Column>
        <Grid.Column width={6}>
          <p>Two</p>
        </Grid.Column>
      </Grid.Row>

      <Grid.Row style={{height: '30%'}}>
        <Grid.Column width={10}>
          <p>Three</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Four</p>
        </Grid.Column>
        <Grid.Column width={3}>
          <p>Five</p>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  );
};

如何制作具有不同行高的语义UI React网格全屏？

1 个答案: