如何使<div>可调整大小？

Question

如何使<div>可调整大小？

htmlcssdrag-and-dropresize

54

有没有一种方法可以使用拖放方式使 <div> 容器可调整大小？

- Chriss

5个回答

16

div {
  border: 1px solid black;
}

.resizable-content {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

<div class="resizable-content">Resize Me!</div>

- sushmitha shenoy

2

已经有一个使用CSS3“resize”的答案了。除此之外，您能否添加一些解释性的文字？ - Martin Meeser

2

我只是想展示一下，如何将 div 的大小调整为低于设置的宽度和高度。因为上面有人说这是不可能的！ - sushmitha shenoy

1

这对我不起作用。 - Hg0428

7

CSS3-only方法的问题在于只有div的右下角变成可拖动的。用户几乎肯定想要从任何边界而不仅仅是右下角调整div的大小。在尝试通过从Stack Overflow复制代码片段来实现此目标浪费了很多时间后，我强烈建议在项目中使用优秀的InteractJS JavaScript库。它允许您轻松创建可从所有侧面调整大小（和可拖动）的div。

- James

2

let root = document.documentElement;
        let spliter = document.querySelector('.spliter-div');
        let rowDiv = document.querySelector('.row-divs');
        let cd1 = document.getElementById('cd-1');
        var isDown = false;
        var isHover = false;
        var minWidth = 127;
        var maxWidth = 600;

        function setPosition() {
            var cl = this.document.querySelector('.col-div');
            if (cl) {
                root.style.setProperty('--m-x', (cl.offsetWidth + 3.5) + 'px');
            }
            minWidth = (parseInt(rowDiv.clientWidth / 10) * 2) + 22;
            maxWidth = parseInt(rowDiv.clientWidth - minWidth);
        }
        function moveTo(e) {
            if (e.clientX > minWidth && e.clientX < maxWidth) {
                if (cd1.classList.contains('col-div-flex')) {
                    cd1.classList.remove('col-div-flex');
                }
                cd1.style.width = e.clientX  + 'px';
                root.style.setProperty('--m-x', (e.clientX + 9.5) + 'px');
            }
        }
        window.addEventListener('DOMContentLoaded', function (e) {
            setPosition();
        });
        window.addEventListener('resize', function (e) {
            setPosition();
        });
        root.addEventListener('mousedown', function (e) {
            if (isHover) {
                isDown = true;
            }
        }, true);
        document.addEventListener('mouseup', function (e) {
            isDown = false;
            if (isHover) {
                //...
            }
        }, true);
        document.addEventListener('mousemove', function (e) {
            if (isDown) {
                moveTo(e);
            }
        });
        spliter.addEventListener('mouseenter', function (e) {
            isHover = true;
            spliter.style.cursor = 'col-resize';
        });
        spliter.addEventListener('mouseout', function (e) {
            isHover = false;
        });

:root{
    --m-x: 0px;
}

html,
body{
    height: 100% ;
    width: 100% ;
    margin: 0 ;
    overflow: hidden ;
}

body{
    margin-bottom: 60px ;
}

.container-divs{
    display: flex ;
    flex: 1 1 auto ;
    height: 100% ;
    width: 100% ;
}

.row-divs{
    display: flex ;
    width: 100% ;
}

.col-div{
    margin: 3px ;
    padding: 3px ;
    min-width: 20% ;
    max-width: 80% ;
}

.col-div-flex{
    flex: 1 0 0%;
}

.border-div{
    border: 1px #a3a3a3 ridge;
    border-radius: 9px;
}

.spliter-div{
    width: 5px ;
    height: 96% ;
    margin: 3px 0;
    background: #9a969676;
    position: absolute;
    left: var(--m-x);
    margin-top: 9px ;
    cursor: col-resize;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Divs - Resizeable</title>
</head>
<body>
    <div class="container-divs">
        <div class="row-divs">
            <div id="cd-1" class="col-div col-div-flex border-div" style="background-color:#d5ff00f7">
            </div>
            <div class="spliter-div"></div>
            <div id="cd-2" class="col-div col-div-flex border-div" style="background-color: #6719b5e2">
            </div>
        </div>
    </div>
</body>
</html>

- Alison Nunes

你应该添加解释。 - Super Kai - Kazuya Ito

你应该加上解释。 - undefined

0

如果您需要在mustberesizeable 标签数组中的每个标签（包括<div>）上执行一些函数doOnResize(tag)，您可以将此数组简单地复制到window的数组中：

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

然后设置

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

在开头的某个地方必须写

const WIN_RESIZED = 'move_resized_divs'

使用任意名称，例如'move_resized_divs'

- Leon Rom

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gs · Accepted Answer

最好的方法是使用CSS3。它至少被Webkit和Gecko支持。

根据w3c规范：

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit和Firefox在解释规范方面存在差异。在Webkit中，大小限制为设置的宽度和高度。关于这个问题，还有另一个问题：如何使用CSS将元素调整大小为小于初始尺寸的尺寸？