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

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!

<<:  MySQL permissions and database design case study

>>:  Detailed explanation of prototypes and prototype chains in JavaScript

Recommend

Solve the problem of black screen when starting VMware virtual machine

# Adjust VMware hard disk boot priority Step 1: E...

Detailed explanation of querying JSON format fields in MySQL

During the work development process, a requiremen...

Linux beginners in virtual machines configure IP and restart the network

For those who are new to virtual machines or have...

A brief analysis of MySQL cardinality statistics

1. What is the cardinality? Cardinality refers to...

Sample code for implementing the Olympic rings with pure HTML+CSS

Rendering Code - Take the blue and yellow rings a...

Vue implements a complete process record of a single file component

Table of contents Preface Single file components ...

How to obtain a permanent free SSL certificate from Let's Encrypt in Docker

1. Cause The official cerbot is too annoying. It ...

Nginx memory pool source code analysis

Table of contents Memory Pool Overview 1. nginx d...

How to use Linux to calculate the disk space occupied by timed files

Open the scheduled task editor. Cent uses vim to ...

...