有没有办法来调整一个div比申报的高度和宽度更小？
我在做一个应用程序，用户可以调整一个div并保存。 然而，当我后来加载它，它尺寸设定为用户设定的最后一次，他们可以在div做大，而不是更小。
这是一个示例的div：
.cls {
border: solid 1px;
width: 100px;
height: 100px;
resize: both;
overflow: auto;
}
http://jsfiddle.net/FNXnD/
这个问题有相同的问题，但使用GWT似乎并没有有一个很好的解决方案。
您请求一种解决方法您的问题，或不知道如何，至少。 我让你一个简单的解决方法可能需要一点点工作; 注意这是一个解决办法，因此可能包含毛刺。
.cls {
width: 100px;
height: 100px;
resize: both;
overflow: auto;
border: 1px dotted #000;
}
.cls:hover {
width: 1px;
height: 1px;
}
更新小提琴： http://jsfiddle.net/FNXnD/1/
如果你想使用CSS3 UI调整大小功能，那么你的浏览器决定您是否可以使它比宣布宽度或高度较小或较大。 http://www.w3.org/TR/css3-ui/#resize
用户代理可以限制调整大小至合适的东西，如元素的原始格式的大小，并足够大以包含所有元素的内容之间。
在Firefox例如，你可以调整它比你的声明宽度或高度。 虽然在铬你不能。
只是想稍微修改一下Pfft在接受的答案说。
如果你使用：active伪类，而不是：悬停它没有闪烁，当你将鼠标悬停在元素。 那闪烁实在是烦人。
div:active {
width: 0;
height: 0;
}
通过使用：主动发生的事情是它会被调整到高度的元素，当点击：0，宽度：0这样一个小圆点在那里1px的边框将被显示，但只要用户开始调整你得到什么你希望在调整大小。 而在随后每次调整大小，没有毛刺，它只是完美的作品。
我觉得这是比使用悬停那么讨厌。 由于Pfft针对上述响应，这正是我一直在寻找，并导致我对我自己稍微改动的解决方案！
下面是它的jsfiddle： http://jsfiddle.net/kronenbear/v4Lq5o09/1/
或者你可以使用jQuery的UI，使一个可调整大小的窗口。
我继续解决的一些问题，尝试使用jQuery UI的可调整大小的小部件用的div有一个滚动溢出，当我经历。 问题是，缩放柄被定位在滚动条内。
为了解决这个问题我做了嵌套彼此内部的三个div的
第一种是包装，是你设置div的起始大小。
第二个是用于把手，其大小应设置为它的父DIV（包装DIV）的100％。 你将不得不调整的z-index将它们定位到最终的滚动条。
第二个DIV还应该包含可拖动手柄DIV和窗口DIV您的所有窗口的内容会。
两者可拖动手柄DIV（.draggable）和窗口DIV（.window）需要被相对定位。 让他们彼此等正确定位可拖动手柄不会超过你的滚动条的顶部。
该.window DIV的规模应为100％父格，就像之前的股利。 这其中将有一个滚动溢出。 现在，因为当你调整，这是等于100％手柄的div使用jQuery手柄格UI也将调整这个div。
可拖动的div设置为100％的宽度和高度无论你想要的，但任何增加的高度将推窗格进一步下降，然后把手DIV，你需要填充底部等量的手柄DIV添加到解决这个问题。 你还需要将把手DIV溢出设置为可见。
毕竟任何你想要的造型不同的元素，你应该是好事，补充。 它很难解释，但我希望这是有道理的。 所有的代码如下，希望这有助于更好地解释然后我的散漫。 这肯定让你调整窗口的大小小，左右移动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。
如果没有指定参数的高度（）和宽度（）将在像素返回的大小。 他们将设置宽度和高度，如果你提供一个值。 如果你没有明确指定一个mesurment，PX默认情况下使用。
在第二部分，它只是检查，如果新的大小（your_x）比originla大小biggre，如果是的话，它会调整它的大小，如果没有它会突出部分忽略。
是的，jQuery将overwide你的CSS规范;）任何人，比格尔或更小的值
使用很重要的，从CSS重写它！
.cls {
border: solid 1px;
width: 100px !important;
height: 100px !important;
resize: both;
overflow: auto;
}
