运用访问器非overflow:auto元素设定resize能够拉伸的特点完成无JavaScript的分栏宽度操纵。
webkit访问器下翻转条能够自定，在其中resize地区尺寸便是scrollbar的尺寸，因而，大家能够将全部拉伸地区变为和器皿1样高。
完成基本原理
CSS中有1个resize特性，假如1个元素的overflow特性值并不是visible，则根据设定resize特性能够拉伸这个元素规格。
可是，这类拉伸却有1个难题，那便是拖拽的地区很小了，就右下角那末1丢丢地区：
那有甚么方法能够把这个拖拽地区增大呢？
后来历经我的科学研究发现，resize特性的拖拽bar和翻转条的拖拽bar是1个人系里边的物品，只必须对翻转条开展自定，就可以间接性设定resize bar的规格。
比如：
.resize-bar::-webkit-scrollbar {
width: 200px; height: 200px;
}
此时，拉伸地区就很大了：
接下来做的事儿便是把这个拖拽地区藏在某1栏合理布局的后边，随后显出一部分宽度能够用来拖拽，以下图所示：
最终，大家的上下分栏选用自融入合理布局就可以完成大家要想的实际效果。
您能够狠狠地址击这里：纯CSS完成分栏宽度拉伸demo
编码以下:
.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;
}
/* 拖拽线 */
.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;
}
/* Firefox仅有下面1小块地区能够拉伸 */
@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: ⑻px;
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">
左边的內容，左边的內容，左边的內容，左边的內容
</div>
</div>
<div class="column-right">
右边的內容，右边的內容，右边的內容，右边的內容
</div>
</div>
运用访问器非overflow:auto元素设定resize能够拉伸的特点完成无JavaScript的分栏宽度操纵。
webkit访问器下翻转条能够自定，在其中resize地区尺寸便是scrollbar的尺寸，因而，大家能够将全部拉伸地区变为和器皿1样高。
到此这篇有关纯CSS完成上下拖拽更改合理布局尺寸的文章内容就详细介绍到这了,更多有关CSS上下拖拽更改合理布局尺寸內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容，期待大伙儿之后多多适用脚本制作之家！
Copyright © 2002-2020 制作小程序_小程序商城_扫码点餐小程序_微信小程序开店的步骤_牛刀小程序 版权所有 （网站地图） 粤ICP备10235580号