纯css实现左右拖拽改变布局大小

最新推荐文章于 2024-10-02 12:33:47 发布

莹宝思密达

最新推荐文章于 2024-10-02 12:33:47 发布

阅读量617

点赞数 1

分类专栏： JScor 文章标签： css html css3 Powered by 金山文档

本文链接：https://blog.csdn.net/miin_ying/article/details/129011290

版权

JScor 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

该文章介绍了一种利用CSS的resize属性和overflow属性创建可拖动的页面分隔组件的方法，允许用户自定义左右两栏的宽度。通过设置特定的CSS类和样式，实现了水平方向的拉伸效果，同时提供了在Firefox和Chrome浏览器中的兼容性解决方案。

摘要由CSDN通过智能技术生成

原博https://blog.csdn.net/shunhua19881987/article/details/124198826?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%88%86%E5%89%B2%E7%AA%97%E5%8F%A3%EF%BC%8C%E9%BC%A0%E6%A0%87%E7%82%B9%E5%87%BB%E6%8B%96%E6%8B%BD%E6%94%B9%E5%8F%98%E5%B7%A6%E5%8F%B3%E9%A1%B5%E9%9D%A2%E5%A4%A7%E5%B0%8F&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-124198826.142^v73^insert_down3,201^v4^add_ask,239^v1^control&spm=1018.2226.3001.4187

扩展：分割页面组件 https://admin.iviewui.com/components/split_pane_page

CSS中有一个resize属性，如果一个元素的overflow属性值不是visible，则通过设置resize属性可以拉伸这个元素尺寸。

css代码

.column {
 
    overflow: hidden;
 
}
 
.column-left {
 
    height: 400px;
 
    background-color: #fff;
 
    position: relative;
 
    float: left;
 
}
 
.column-right {
 
    height: 400px;
 
    padding: 16px;
 
    background-color: #eee;
 
    box-sizing: border-box;
 
    overflow: hidden;
 
}
 
.resize-save {
 
    position: absolute;
 
    top: 0; right: 5px; bottom: 0; left: 0;
 
    padding: 16px;
 
    overflow-x: hidden;
 
}
 
.resize-bar {
 
    width: 200px; height: inherit;
 
    resize: horizontal;
 
    cursor: ew-resize;
 
    opacity: 0;
 
    overflow: scroll;
 
}
 
/* 拖拽线 */
 
.resize-line {
 
    position: absolute;
 
    right: 0; top: 0; bottom: 0;
 
    border-right: 2px solid #eee;
 
    border-left: 1px solid #bbb;
 
    pointer-events: none;
 
}
 
.resize-bar:hover ~ .resize-line,
 
.resize-bar:active ~ .resize-line {
 
    border-left: 1px dashed skyblue;
 
}
 
.resize-bar::-webkit-scrollbar {
 
    width: 200px; height: inherit;
 
}
 
 
 
/* Firefox只有下面一小块区域可以拉伸 */
 
@supports (-moz-user-select: none) {
 
    .resize-bar:hover ~ .resize-line,
 
    .resize-bar:active ~ .resize-line {
 
        border-left: 1px solid #bbb;
 
    }
 
    .resize-bar:hover ~ .resize-line::after,
 
    .resize-bar:active ~ .resize-line::after {
 
        content: '';
 
        position: absolute;
 
        width: 16px; height: 16px;
 
        bottom: 0; right: -8px;
 
        background: url(./resize.svg);
 
        background-size: 100% 100%;
 
    }
 
}

html代码

<div class="column">
 
    <div class="column-left">
 
        <div class="resize-bar"></div>
 
        <div class="resize-line"></div>
 
        <div class="resize-save">
 
            左侧的内容，左侧的内容，左侧的内容，左侧的内容
 
        </div>                                           
 
    </div>
 
    <div class="column-right">
 
        右侧的内容，右侧的内容，右侧的内容，右侧的内容
 
    </div>
 
</div>