divのサイズを宣言された高さと幅よりも小さくする方法はありますか？
ユーザーがdivのサイズを変更して保存できるアプリケーションを作成しています。ただし、後でロードして、ユーザーが前回設定したサイズに設定すると、divを大きくすることはできますが、小さくすることはできません。
これはサンプルdivです：
.cls {
border: solid 1px;
width: 100px;
height: 100px;
resize: both;
overflow: auto;
}
この質問にも同じ問題がありますが、GWTを使用しており、適切な解決策がないようです。
CSS3 UIのサイズ変更機能を使用する場合は、ブラウザが、宣言された幅または高さよりも小さくするか大きくするかを決定します。http://www.w3.org/TR/css3-ui/#resize
ユーザーエージェントは、サイズ変更の範囲を、要素の元のフォーマットされたサイズと、要素のすべてのコンテンツを包含するのに十分な大きさの間など、適切なものに制限することができます。
たとえばFirefoxでは、宣言した幅または高さよりも小さくサイズ変更できます。クロームではできません。
受け入れられた回答でPfftが言ったことを少し変更したいだけです。
：hoverの代わりに：active疑似クラスを使用する場合、要素にカーソルを合わせてもちらつきはありません。そのちらつきは本当に迷惑です。
div:active {
width: 0;
height: 0;
}
：activeを使用すると、要素をクリックすると、高さ：0、幅：0にサイズ変更されるため、1pxの境界線が表示される小さなドットが表示されますが、ユーザーがサイズ変更を開始するとすぐに、正確にサイズ変更が必要になります。そして、その後のすべてのサイズ変更でグリッチはなく、完全に機能します。
これは、ホバーを使用するよりもはるかに煩わしくないことがわかります。上記の回答をくれたPfftのおかげで、それはまさに私が探していたものであり、私自身のわずかに変更された解決策に私を導きました！
これがそのjsfiddleです：http：//jsfiddle.net/kronenbear/v4Lq5o09/1/
問題の回避策をリクエストしたか、少なくともハウツーを考えていました。少しの作業が必要になる可能性のある簡単な回避策を作成しました。これは回避策であるため、グリッチが含まれている可能性があることに注意してください。
.cls {
width: 100px;
height: 100px;
resize: both;
overflow: auto;
border: 1px dotted #000;
}
.cls:hover {
width: 1px;
height: 1px;
}
更新されたフィドル：http：//jsfiddle.net/FNXnD/1/
または、jQuery-UIを使用してサイズ変更可能なウィンドウを作成できます。
私は先に進み、スクロールオーバーフローが発生したdivでjQueryuiサイズ変更可能なウィジェットを使用しようとしたときに発生したいくつかの問題に対処しました。問題は、サイズ変更ハンドルがスクロールバーの内側に配置されていたことでした。
これを修正するために、3つのdivを互いにネストしました
最初のものはラッパーであり、divの開始サイズを設定する場所です。
2つ目はハンドル用で、そのサイズは親div（ラッパーdiv）の100％に設定する必要があります。z-indexを調整して、最終的なスクロールバーに配置する必要があります。
2番目のdivには、ドラッグ可能なハンドルdivとすべてのウィンドウコンテンツが配置されるウィンドウdivも含まれている必要があります。
ドラッグ可能なハンドルdiv（.draggable）とウィンドウdiv（.window）の両方を相対的に配置する必要があります。それらが互いに適切に配置され、ドラッグ可能なハンドルがスクロールバーの上に重ならないようにします。
.window divは、前のdivと同じように、親divの100％にスケーリングする必要があります。これはスクロールオーバーフローが発生します。jQuery uiを使用してハンドルdivのサイズを変更すると、これはハンドルdivの100％に等しいため、このdivのサイズも変更されます。
ドラッグ可能なdivを幅100％、高さを任意の高さに設定しますが、高さを追加すると、ウィンドウdivがハンドルdivよりもさらに下に押し出され、ハンドルdivに同量のパディングボトムを追加する必要があります。これを修正します。また、handlesdivオーバーフローをvisibleに設定する必要があります。
結局のところ、さまざまな要素に必要なスタイリングを追加すれば、うまくいくはずです。説明するのは難しいですが、私はそれが理にかなっていることを願っています。すべてのコードは以下にあり、うまくいけば、それは私のとりとめのないことよりもよく説明するのに役立ちます。これにより、ウィンドウのサイズを小さくしたり、divを移動したり、必要に応じてdivでスクロールオーバーフローを発生させたりすることができます。
HTML
<!DOCtype html>
<html lang="en">
<head>
<title>Adjustable Window</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/adjWindow.css">
<link rel="stylesheet" type="text/css" href="../jquery-ui-1.11.4/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/adjWin.js"></script>
</head>
<body id="top">
<div class="winWrap">
<div class="handles">
<div class="draggable"><p>Window Title</p></div>
<div class="window">
<div class="windowContent">
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.winWrap {
position: relative;
width: 500px;
height: 500px;
}
.draggable {
position: relative;
width: 100%;
height: 20px;
box-shadow: inset 0px 0px 6px rgba(0,0,0,0.9);
background-color: rgba(255,255,255,0.5);
text-align: center;
z-index: 1;
}
.draggable p {
padding: 2px;
margin: 0px;
cursor: default;
}
.handles {
position: relative;
width: 100%;
height: 100%;
padding-bottom: 20px;
overflow: visible;
box-shadow: 20px 15px 20px rgba(0,0,0,0.4);
z-index: 1;
}
.window {
position: relative;
width: 100%;
height: 100%;
overflow: scroll;
background-color: rgba(0,0,0,0.1);
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.7);
}
.windowContent{
position: absolute;
}
jQueryとjQuery-UIサイズ変更可能なウィジェットでminHeightオプションとminWidthオプションを使用することをお勧めします。そうしないと、ウィンドウのサイズをほとんどゼロに変更でき、divを小さくしてリロードする必要があるなどの厄介な副作用を引き起こす可能性があります。サイズ変更ハンドルをクリックするページ。また、私の意見では、よりプロフェッショナルに見えます。
ドラッグ可能なウィジェットの場合、移動するdiv全体のラッパーをターゲットにしてから、ウィンドウdivに配置したドラッグ可能なdivのハンドルを指定します。
/*global $, jQuery, alert*/
$(document).ready(function () {
'use strict';
$('.handles').resizable({minHeight: 100, minWidth: 100});
$('.winWrap').draggable({handle: '.draggable'});
});
$('.cls').css('height', 200);
$(".cls").mouseup( function(){
var height = $(".cls").height();
var width = $(".cls").width();
if(height>=200){
$('.cls').css('height', 200);
}
if(width>=100){
$('.cls').css('width', 100);
}
var
newdimensions="newheight="+height+"&"+"newwidth="+width;
});
javascript usign jqueryの場合：
//get the current heigt and the width of the element
var h = $('.cls').height();
var w = $('.cls').width();
// i don'T know how you provide your nes size, but once you have in i a variable, you can just do
if(your_h > h) $('.cls').height(your_h);
if(your_w > w) $('.cls').width(your_w);
サイズがPXであると仮定します。
引数が指定されていない場合、Height（）とwidth（）はピクセル単位のサイズを返します。値を指定すると、高さと幅が設定されます。測定値を明示的に指定しない場合、デフォルトでpxが使用されます。
2番目の部分では、新しいサイズ（your_x）が元のサイズよりも大きいかどうかを確認します。大きい場合はサイズを変更します。そうでない場合は無視します。
そして、はい、jqueryはあなたのcss仕様を広めます;）誰でも、より大きなまたはより小さな値