Pure CSS to achieve left and right drag to change the layout size

Utilize the browser's non- overflow:auto element resize stretching feature to achieve JavaScript-free column width control.

The scroll bar in the webkit browser can be customized, and the size of the resize area is the size of the scrollbar. Therefore, we can make the entire stretch area the same height as the container.

Implementation principle

There is a resize attribute in CSS. If the overflow attribute value of an element is not visible , the size of the element can be stretched by setting the resize attribute.

However, there is a problem with this stretching, that is, the dragging area is too small, just a little bit in the lower right corner:

Is there any way to make this drag area larger?

Later, after my research, I found that the drag bar of the resize attribute and the drag bar of the scroll bar are things in the same system. You only need to customize the scroll bar to indirectly set the size of the resize bar.

For example:

.resize-bar::-webkit-scrollbar {
 width: 200px; height: 200px;
}

At this point, the stretching area is very large:

The next thing to do is to hide this drag area behind a column layout, and then expose part of the width for dragging, as shown below:

Finally, we can achieve the desired effect by using adaptive layout for the left and right columns.

You can click here: Pure CSS to achieve column width stretching demo

The code is as follows:

.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;
}
/* Drag line */
.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;
}

/*Only the small area below can be stretched in 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%;
    }
}

<div class="column">
    <div class="column-left">
        <div class="resize-bar"></div>
        <div class="resize-line"></div>
        <div class="resize-save">
            Content on the left, content on the left, content on the left, content on the left</div>                                            
    </div>
    <div class="column-right">
        Content on the right, content on the right, content on the right, content on the right</div>
</div>

Utilize the browser's non- overflow:auto element resize stretching feature to achieve JavaScript-free column width control.

The scroll bar in the webkit browser can be customized, and the size of the resize area is the size of the scrollbar. Therefore, we can make the entire stretch area the same height as the container.

This is the end of this article about how to change the layout size by dragging left and right with pure CSS. For more information about changing the layout size by dragging left and right with CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!