How to achieve column width stretching adjustment with pure CSS

Related recommendations: "css video tutorial"

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%;
    }
}

Principle

Utilize the stretchable feature of the browser's non-overflow:auto element settings to achieve JavaScript-free column width control. The scroll bar under the webkit browser can be customized. The size of the resize area is the size of the scrollbar. Therefore, we can make the entire stretch area as high as the container.

css3 free scaling attribute resize

The syntax and parameters of the resize attribute

The resize attribute is mainly used to change the size of the element, and its main purpose is to enhance the user experience.

resize: none | both | horizontal | vertical | inherit

The values ​​specified by the resize attribute in CSS3 are divided into the following types.

none: The user cannot drag the element to change the size.

• both: The user can drag the element and modify the height and width of the element at the same time
• 
  horizontal: The user can drag the element and only change the width of the element, but cannot modify the element. high.
• 
  vertical: The user can drag the element and can only change the height of the element, but cannot modify the width of the element.
• 
  inherit: inherit the resize attribute value of the parent element
• 
  

The above is the detailed content of How to achieve column width stretching adjustment with pure CSS. For more information, please follow other related articles on the PHP Chinese website!