Question

我有以下div：

<div style='overflow:hidden;resize:both;border:1px solid orange;'>
   <div style='background-color:#aaa;width:400px;height:300px;'>
   </div>
</div>

你可以在这里看到它：http://jsfiddle.net/4w7zd/

如果你在firefox中运行它，你可以调整主div的大小。（使其变大或变小）但是如果你在chrome中运行它，你只能调整大小以使它更大（更宽更高）

有人可以告诉我如何解决这个问题，这样我就可以让主要的div尽可能小（比如使用firefox）吗？

非常感谢

Answer 1

在Chrome中，使用resize时的最小宽度取决于其内容。这种方式适用于Google Chrome浏览器：http://jqueryui.com/resizable/

嵌入jquery库：

  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

使用Javascript：

<script>
  $(function() {
    $( ".resizable" ).resizable();
  });
</script>

HTML：

<div class="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

Answer 2

这是一种解决方法：

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

适用于Chrome，Safari和Firefox。它可能不适用于IE，但我还没有检查过。但是，此变通办法的问题在于，您无法与可调整大小的div中的元素进行交互。

http://jsfiddle.net/Lf5qmos4/

Answer 3

我做了一些测试，似乎内容使得无法在chrome中调整大小。我已将您的案例更新为此

<div style='overflow:auto;resize:both;border:1px solid orange; min-height: 10px;'>
    <div style='background-color:#eee;width:400px;max-height:300px; height:100%;'>
    </div>
</div>

现在似乎有效：http://jsfiddle.net/4w7zd/7/

不确定这是否适合你，但它可能会指向正确的方向。

div“style = resize：both”不能缩小chrome（但它在firefox中有效）

3 个答案: