6

我想使用resizecss 属性使 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

4

4 回答 4

4

更好的解决方案是使用 :active 伪类,例如:

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

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

于 2016-01-25T18:37:41.433 回答
1

我在这里找到了一个小的解决方法,但它确实有效。

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

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

听起来这会导致轻微的“闪光”,因为宽度和高度正在发生巨大变化,但是......这是一个黑客。

于 2013-04-02T14:35:53.870 回答
1

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

    #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>

于 2013-04-02T14:36:20.027 回答
1

我已经尝试了几个小时,但不能让它比黑客更好地工作,如果我可以触发 userresize 我很乐意将 chrome 的宽度设置为 min-width 然后触发调整大小以将其放在我想要的位置,因为它移动后似乎可以将其移回原始位置。但我不知道怎么做。

于 2013-07-19T00:53:15.127 回答