javascript - 如何将语义行的高度扩展到页面底部

Question

我正在尝试使用 semantic-ui 创建网格。有谁知道我如何扩展一行的高度以到达页面底部，以及如何扩展到自定义大小以供将来引用？这是我所拥有的:

<div className = "ui container" >
    <div className = "stretched ui grid">

        <div className = "ten wide column float left  ">
            <div className = "">
                <FileUpload files = {this.state.files} fileChanged = {this.state.fileChanged} />
            </div>
        </div>

        <div className = " five wide column uploader float right" >
            <div className= "">
                <input type="file" id = "my-file"/> 
            </div>
        </div>  

    </div>

    <div className = "ui segment one column row" style={{height:'50%'}}>
        <CommentSection onCommentButtonClick = {this.handleCommentButtonClick}/>    
    </div>

</div>

我想更改的是带有 className className = "ui segment one column row"style={{height:'50%'}} 的 div。将高度设置为 50% 似乎根本没有任何作用

Answer 1

问题是以 % 指定高度，语义 UI 需要以下格式的语法:

<div style={{height: spacing  'em'}}

那么，试试:

<div className = "ui segment one column row" style={{height: 50}}>

注意:“em”中的语义 ui 自定义样式，因此在此示例中默认高度属性为 50 em。