语义UI React全页网格,如何隐藏溢出的列内容?

时间:2019-02-02 00:44:17

标签: css reactjs semantic-ui semantic-ui-react

我有一个full-page grid,它根据浏览器的高度将其高度与恒定的菜单栏和页脚高度对齐。

我正在尝试限制某些网格列中显示的内容量,以便即使内容比容器长,它也会显示y-scrollbar或被隐藏。

所需:整页网格保持不变,不会根据子元素的高度重新调整高度。

请参见沙盒:

1 个答案:

答案 0 :(得分:0)

一个人可以使用CSS overflow功能来控制容器如何处理内容溢出。

如果要使用沿y轴的滚动条以允许滚动超出容器边界的内容,则可以定义overflow-y属性,如以下代码段所示:< / p>

overflow-y: scroll;

在这里,我对CSS3和语义UI的理解有些模糊。将Grid.Column属性和stretched一起使用会导致在元素上设置flex-flow属性。该财产在其持有人子女的尺寸上保持着联系。我尝试过使用您的代码,当与子代的高度设置为绝对值(即以vhpx的单位一起使用时,该设计似乎会产生结果)接近您指定的值。

作为免责声明,您应该知道我相当随意地选择了height的值,并且仍然可以使用,但是我不能保证它可以在各种窗口形状因数或跨多个浏览器中使用。

这是根据您的示例文件得出的FieldGrid.js的区别,该文件是经过修改以获得所需结果的唯一文件:

44c44
<                   <Segment>
---
>                   <Segment style={{ height: '1px', overflowY: 'scroll' }}>
55c55
<                   <Segment>
---
>                   <Segment style={{ height: '1px', overflowY: 'scroll' }}>

根据您的输入,我创建了另一个codesandbox)供您使用。请注意,1px的高度显然是荒谬的,但似乎仍然可行,还请注意,已经为需要滚动条的每个元素指定了overflow-y属性。