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

【问题标题】：how to extend height of semantic row to bottom of page如何将语义行的高度扩展到页面底部
【发布时间】：2019-07-30 15:23:46
【问题描述】：

我正在尝试使用语义 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 = "ui segment one column row" style={{height:'50%'}} 的div。将高度设置为 50% 似乎根本没有做任何事情

【问题讨论】：

标签： javascript css semantic-ui grid-layout

【解决方案1】：

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

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

那么，试试吧：

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

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

【讨论】：

【解决方案2】：

您可以使用 FlexBox。

<div className = "ui container" style={{flex: 1}} >
    <div className = "stretched ui grid" style={{flex: 1}}>

        <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={{flex: 1}}}>
        <CommentSection onCommentButtonClick = {this.handleCommentButtonClick}/>    
    </div>

</div>

【讨论】：