Question

我想使用resize css属性调整div的大小：

#foo{
    overflow:hidden;
    resize:both;
}

我可以使用firefox自由调整大小。

使用chrome / safari我无法将其调整为小于初始大小。

他们是一种允许使用webkit调整大小的方法吗？（min-width / min-height不起作用）

查看来自MDN的实时示例（带有2个嵌套的div） https://developer.mozilla.org/samples/cssref/resize.html

Answer 1

更好的解决方案是使用：active pseudo class例如：

div:active {
  height: 0;
  width: 0;
}

示例：http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Answer 2

我发现here有一个小的解决方法，但确实有效。

悬停时，将高度和宽度更改为1px

#foo:hover{
    width: 1px;
    height: 1px;
}

听起来这会导致轻微的“闪光”，因为宽度和高度都在急剧变化，但是......这是一个黑客攻击。

Answer 3

使用该实例作为参考，我能够将初始大小设置为等于div的宽度和高度，并将min-height和min-width设置为Chrome中允许的最小尺寸。 / p>

    #foo {
      resize: both;
      overflow: scroll;
      width: 300px;
      height: 300px;
      min-width: 50px;
      min-height: 70px;
    }
    div {
      background-color: #acacac;
      border: 1px solid #000;
    }

<div id="foo"></div>

Answer 4

我已经尝试了几个小时，但是无法使它比黑客更好地工作，如果我可以触发用户归属我很乐意将chrome的宽度设置为min-width然后触发调整大小将其放在我想要的位置，因为看起来你可以在移动后将它移回原位。但我找不到如何。

Css调整最小宽度

4 个答案: