2

我有以下 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 一样）？

非常感谢

4

3 回答 3

1

我做了一些测试，似乎内容使得无法在 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/

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

于 2013-01-23T21:22:07.713 回答
1

在 chrome 中，使用时的最小宽度resize取决于它的内容。这种方式在谷歌浏览器中适用于我：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>
于 2013-01-23T21:28:38.837 回答
1

这是一种解决方法：

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

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

http://jsfiddle.net/Lf5qmos4/

于 2016-01-22T23:46:52.550 回答