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
# Adjust VMware hard disk boot priority Step 1: E...
http://www.cppcns.com/shujuku/mysql/283231.html Y...
Preface This article mainly introduces the releva...
During the work development process, a requiremen...
Readonly and Disabled both prevent users from cha...
For those who are new to virtual machines or have...
1. What is the cardinality? Cardinality refers to...
Because we were going to build a website, in addi...
Rendering Code - Take the blue and yellow rings a...
Table of contents Preface Single file components ...
1. Cause The official cerbot is too annoying. It ...
Table of contents Memory Pool Overview 1. nginx d...
Find the problem Recently, when I was filling in ...
Open the scheduled task editor. Cent uses vim to ...