防止子元素扩展到父元素div之外

我在这个问题上花了很多时间,一直没有找到可行的解决方案,但我觉得自己好像漏掉了一些明显的东西。

我有一个表组件,可以容纳大量的行,它的高度是不确定的,它的设置是根据里面的行数来自动确定它的高度,它的 <Table /> 组件通过反应套件.

与其让Table永远在页面上,不如让Table溢出页面,并将它的可查看高度限制在父div内。

<div style={{heigh: 30%}}>
     ....
     <Table autoHeight={true}/> //constrain inside height of parent div
</div>

无论我怎么做,我都无法让它保持在父 div 内。

解决方案:

溢出滚动需要2个基本条件

  • 容器必须有一个有限的高度,而不是百分比,或者它的祖先有
  • 容器的设置为 溢出: scrollauto,如果你只想垂直滚动,也有溢出-y。详细的说明可以参考链接。

下面的例子使用一个单独的类和最小的设置来说明这个概念。将表格设置成一个高度来模拟它很长,同时用背景色来显示它的面积。

.scroll-container {
            /** must have a finite height when using percentage, or its parent must be finit */
            height: 100px;
            overflow: auto;
        }

        table {
            background: red;
            height: 1000px;
            width: 100%;
        }
<div class="scroll-container">
     <table>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
        <tr>
            <td>Row content</td>
        </tr>
     </table>
</div>

给TA打赏
共{{data.count}}人
人已打赏
未分类

在ef核心中更新一个实体wo查询它指定交替键?

2022-9-9 7:09:21

未分类

Ansible 2.4 uri模块下载文件(1K),即使它不存在--url返回404错误。

2022-9-9 7:09:23

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索