相关推荐：《css视频教程》
Html：
<p class="column"> <p class="column-left"> <p class="resize-bar"></p> <p class="resize-line"></p> <p class="resize-save"> 左侧的内容 </p> </p> <p class="column-right"> 右侧的内容 </p></p
css
.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; max-width: 500px;//设定最大拉伸长度 min-width: 200px;//设定最小宽度}/* 拖拽线 */.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只有下面一小块区域可以拉伸 */@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%; }}原理
利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。
webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样高。
css3自由缩放属性resize
resize属性的语法及参数
resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。
resize: none | both | horizontal | vertical | inherit
在css3中 resize 属性指定的值分为以下几种。
- none：用户不能拖动元素修改尺寸大小。
- both：用户可以拖动元素，同时修改元素的高度和宽度
- horizontal：用户可以拖动元素，仅可以改变元素的宽度，但不能修改元素的高度。
- vertical：用户可以拖动元素，仅可以改变元素的高度，不能修改元素的宽度。
- inherit：继承父元素的resize属性值
以上就是纯CSS如何实现分栏宽度拉伸调整的知识。速戳>>知识兔学习精品课！