前端布局，y轴超出滚动、x轴超出展示方案

小糊涂加油

于 2024-10-16 10:40:13 发布

阅读量494

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 react

本文链接：https://blog.csdn.net/Elaine20132014/article/details/142971534

想要实现布局效果，红区高度固定可滑动可收起。红区引用绿区组件。

一般会想到如下方案，红区样式：

width：200px;
height: 100%;
overflow-y: auto;
overflow-x: visible;

但是效果并不好，绿区直接隐藏了

最终采用布局方案

        红区
        width: 200px;
        height: 100%;
        overflow-y: auto;
        overflow-x: visible;
        黑区
        width: auto;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: row;

createPortal 红绿区数据流动不受影响

createPortal(<div>绿区</div>,document.querySelector('黄区'))