具有纯 css 的可调整大小的 div

Question

I want to implement resizable div with pure css and html (only).我想用纯 css 和 html （仅）实现可调整大小的 div。
this is my example code:这是我的示例代码：

<html>
<head>
    <link type="text/css" rel="stylesheet" href="./css/main.css" />
</head>
<body>
    <article>
        <section class="left">Left Side</section>
        <section class="center">Center</section>
        <section class="right">Right Side</section>
    </article>
</body>
</html>

this is my scss:这是我的scss：

body {
    margin: 0;
    padding: 0;
    color: white;
}

article {
    background-color: yellow;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
    section {
        background-color: #2c2c2c;
    }
    .left {
        resize: horizontal;
        overflow: auto;
    }
    .center {
        border-right: 1px solid rgba(134, 134, 134, 0.255);
        border-left: 1px solid rgba(134, 134, 134, 0.255);
        resize: horizontal;
        overflow: auto;
    }
    .right {
        // How can fix this ?!
    }
}

How can style right side section to fill area between right side of Center section and right screen?如何设置right side部分的样式以填充Center部分右侧和右侧屏幕之间的区域？

Answer 1

Change your column structure to grid-template-columns: auto auto 1fr;将列结构更改为grid-template-columns: auto auto 1fr;

 body { margin: 0; padding: 0; color: white; } article { background-color: yellow; width: 100%; height: 100%; display: grid; grid-template-columns: auto auto 1fr; justify-content: start; } article section { background-color: #2c2c2c; } article.left { resize: horizontal; overflow: auto; } article.center { border-right: 1px solid rgba(134, 134, 134, 0.255); border-left: 1px solid rgba(134, 134, 134, 0.255); resize: horizontal; overflow: auto; background: green; } article.right { background: red; }

 <article> <section class="left">Left Side</section> <section class="center">Center</section> <section class="right">Right Side</section> </article>

具有纯 css 的可调整大小的 div

问题描述

1 个解决方案

解决方案1
2 已采纳 2021-04-24 18:20:35

具有纯 css 的可调整大小的 div

问题描述

1 个解决方案

解决方案1 2 已采纳 2021-04-24 18:20:35

解决方案1
2 已采纳 2021-04-24 18:20:35