有没有一种方法可以将div的大小调整为小于声明的高度和宽度?
我正在制作一个应用程序，在该应用程序中，用户可以调整div的大小并保存它。但是，当我稍后加载它并将其设置为用户上次设置的大小时，他们可以使div变得更大，但不能使其变得更小。
这是一个示例div：
.cls {
border: solid 1px;
width: 100px;
height: 100px;
resize: both;
overflow: auto;
}
这个问题与之相同，但使用了GWT，并且似乎没有一个好的解决方案。
我想对接受答案中Pfft所说的内容进行轻微修改。
如果您使用:active伪类而不是:hover，当您悬停在元素上时，它不会出现闪烁。那种闪烁真的很烦人。
div:active {
width: 0;
height: 0;
}
您请求一个解决方案来解决问题，或者至少想知道如何解决。我为您提供了一个简单的解决方案，可能需要一些工作;请注意这是一个解决方案，因此可能会包含一些问题。
.cls {
width: 100px;
height: 100px;
resize: both;
overflow: auto;
border: 1px dotted #000;
}
.cls:hover {
width: 1px;
height: 1px;
}
更新的 fiddle：http://jsfiddle.net/FNXnD/1/
<!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;
}
使用可调整大小的小部件时，建议使用minHeight和minWidth选项，否则您的窗口将能够调整大小到几乎为零，并可能导致一些烦人的副作用，例如使div变得非常小，需要重新加载页面以单击调整大小的手柄。在我看来，这样做也更加专业。
对于可拖动的小部件，您需要针对要移动的整个div的包装器进行定位，然后将其句柄设置为我们放置在window 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;
});
//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大小。如果提供值，则会设置高度和宽度。如果您没有明确指定测量单位，默认情况下使用px。
在第二部分中，它只是检查新大小（your_x）是否大于原始大小，如果是，则调整大小，否则将忽略。
是的，jQuery将覆盖您的CSS规范;) 无论任何人，都可以使用更大或更小的值
.css()设置大小，它会将样式添加到内联中。问题是一旦设置了大小，我就无法拖动调整元素的大小为比设置的大小更小。 - chustar