将div的大小调整为小于其声明的大小？

Question

有没有办法将div的大小调整为小于声明的高度和宽度？

我正在创建一个应用程序,用户可以调整div的大小并保存它.但是,当我稍后加载它并将其设置为用户设置为上次的大小时,它们可以使div更大,但不能更小.

这是一个示例div:

.cls {
  border: solid 1px;
  width: 100px;
  height: 100px;
  resize: both;
  overflow: auto;   
}?

http://jsfiddle.net/FNXnD/

这个问题有同样的问题,但使用GWT并没有一个好的解决方案.

Answer 1

如果要使用CSS3 UI调整大小功能,则浏览器会决定是否可以使其小于或大于声明的宽度或高度.http://www.w3.org/TR/css3-ui/#resize

用户代理可以将调整大小范围限制为合适的范围,例如在元素的原始格式化大小之间,并且足够大以包含所有元素的内容.

例如,在Firefox中,您可以将其调整为小于声明的宽度或高度.虽然在铬合金中你不能.

Answer 2

您请求解决您的问题，或者至少想知道如何解决。我为您提供了一个简单的解决方法，可能需要一些工作；请注意，这是一种解决方法，因此可能包含故障。

\n\n

.cls {\n    width: 100px;\n    height: 100px;\n    resize: both;\n    overflow: auto;\n    border: 1px dotted #000;\n}\n\n.cls:hover {\n    width: 1px;\n    height: 1px;\n}\n

\n\n

\xe2\x80\x8b\n更新的小提琴：http://jsfiddle.net/FNXnD/1/

\n\n

\n
• 注意Chrome 和 Safari 可能会在未来版本中更改 CSS3 调整大小功能。
\n

\n