Question

我右边有一列<IndustryList />，我希望包含<div>和<ParameterAndPostSearch />的另一个<SocialPostList />中的所有内容都延伸到底部，但我可以＆即使使用height: 100%，也可以将其扩展到底部。这是图像：

以下是ReactJS代码中的相关组件： 我已经大大简化了任何不应该成为问题的事情。我使用的是Tachyons CSS，但它应该是自我解释的（如果没有，我可以添加CSS）

render() {
    return (
        <div className='flex'>
            <div className='flex fixed width-235-px height-100'>
                <IndustryList />
            </div>
            <div className='margin-L-235px height-100'> // this height isn't doing anything
                <div className=''>
                    <ParameterAndPostSearch />
                </div>
                <div className='flex'>
                    <SocialPostList />
                </div>
            </div>
        </div>
    )
}

<SocialPostList />仅供参考：

return (
    <div className='flex'>
        <div className='flex-auto'>
            <h4>Available Parameters:</h4>
            <PostListArray />
            {this.props.allSocialPostsQuery.allSocialPosts.map((socialPost, index) => (
                <SocialPost />
            ))}
            <div>
                <form>
                    <input />
                </form>
                <button>Submit</button>
            </div>
        </div>
        <div className='background-black width-350-px height-100'>

        </div>
    </div>
)

搞清楚了！更新... 所有固定的和绝对的都在不应该有它们的区域引起滚动条。此外，我经历并模仿了这里https://jsfiddle.net/MadLittleMods/LmYay/找到的flexbox布局，它帮助了很多。所以花了一段时间，但我解决了所有问题。

Answer 1

我没有使用过Tachyon CSS，但这就是文档中的内容：

/* Height Percentages - Based off of height of parent */
.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
.min-h-100 { min-height: 100%; }

/* Screen Height Percentage */
.vh-25 { height: 25vh; }
.vh-50 { height: 50vh; }
.vh-75 { height: 75vh; }
.vh-100 { height: 100vh; }

确保每个父元素都设置为100％，没有填充和边距。

Flexbox css获得高度100％

1 个答案: