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 のサイズを変更できます。（大きくしたり小さくしたりします）ただし、クロムで実行する場合は、サイズを変更して大きくする（幅を広くしたり高くしたりする）ことしかできません

誰かがそれを回避する方法を教えてもらえますか?

どうもありがとう

4

3 に答える 3

1

クロームでは、使用時の最小幅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>
于 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 に答える
1

私はいくつかのテストを行いましたが、コンテンツが原因でクロムでサイズを変更できないようです。あなたのケースをこれに更新しました

<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 に答える