Utilize the browser's non- 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 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- 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
Table of contents 1. BOM Introduction 1. JavaScri...
Develop a number guessing game that randomly sele...
I just learned some html yesterday, and I couldn...
introduction: Slider drag verification is now use...
There are three main ways to use CSS in a page: ad...
First, let’s understand what Docker is? Docker is...
Function currying (black question mark face)? ? ?...
The sort command is very commonly used, but it al...
Table of contents 1. Main functions 2. Implementa...
Table of contents Preface Communication between t...
Use scenarios: The project's pages need to lo...
A: Usually stored in the client. jwt, or JSON Web...
This article is compiled with reference to the My...
Table of contents 1. rsync, cp copy files 2. sele...
As shown in the following figure: When we use vir...