web-dev-qa-db-ja.com

セマンティックUIを作成する方法React異なる行の高さのグリッドフルスクリーン？

Semantic UI React グリッドのフルスクリーンを特定のレイアウトで作成しようとしています。

enter image description here

私のコンポーネントには、次のレンダリングメソッドがあります。

  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>
    );
  }

列の幅は正しいですが、高さは正しくありません。これは上記のコードが私に与えるものです：

enter image description here

画面の70％に合わせて上の行を拡大し、残りの30％に合わせて下の行を拡大するにはどうすればよいですか？または、一番上の行を600pxに設定し、一番下の行を画面の残りの部分に設定するにはどうすればよいですか？どちらの方法でも大丈夫です。

Style.cssでコンポーネントにIDを指定し、そのIDを100％に設定しようとしましたが、高さは変更されていません。

cssreactjssemantic-ui
5
grabury

stretchedがあなたがやろうとしていることをしているとは思いません。 Stretched のドキュメントを読んで、例を確認してください。

グリッドの高さを100vhに、最初の行の高さを70%に、2番目の行の高さを30%に設定できます。 これが私がまとめたjsfiddleの例です。

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>
  );
};
9
Andrew Ferk