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

JavaScript BOM Explained

Table of contents 1. BOM Introduction 1. JavaScri...

Pure JavaScript to implement the number guessing game

Develop a number guessing game that randomly sele...

A small introduction to the use of position in HTML

I just learned some html yesterday, and I couldn&#...

A Deeper Look at the Differences Between Link and @import

There are three main ways to use CSS in a page: ad...

A simple way to build a Docker environment

First, let’s understand what Docker is? Docker is...

How to implement function currying and decurrying in Javascript

Function currying (black question mark face)? ? ?...

One question to understand multiple parameters of sort command in Linux

The sort command is very commonly used, but it al...

Implementing a simple student information management system based on VUE

Table of contents 1. Main functions 2. Implementa...

Detailed explanation of how two Node.js processes communicate

Table of contents Preface Communication between t...

Nginx content cache and common parameter configuration details

Use scenarios: The project's pages need to lo...

Install MySQL 5.7 on Ubuntu 18.04

This article is compiled with reference to the My...

Selection and thinking of MySQL data backup method

Table of contents 1. rsync, cp copy files 2. sele...

Detailed explanation of Docker working mode and principle

As shown in the following figure: When we use vir...