Question

有没有办法将div的大小调整为小于声明的高度和宽度？

我正在创建一个应用程序，用户可以调整div的大小并保存它。但是，当我稍后加载它并将其设置为用户设置为上次的大小时，它们可以使div更大，但不能更小。

这是一个示例div：

.cls {
  border: solid 1px;
  width: 100px;
  height: 100px;
  resize: both;
  overflow: auto;   
}

http://jsfiddle.net/FNXnD/

This question有相同的问题，但使用GWT，似乎没有一个好的解决方案。

Answer 1

如果您想使用CSS3 UI调整大小功能，那么您的浏览器会决定是否可以使其小于或大于声明的宽度或高度。 http://www.w3.org/TR/css3-ui/#resize

用户代理可以将调整大小范围限制为适合的范围，例如在元素的原始格式化大小之间，并且足够大以包含所有元素的内容。

例如，在Firefox中，您可以将其调整为小于声明的宽度或高度。虽然在铬合金中你不能。

Answer 2

只想稍微修改Pfft在接受的答案中所说的内容。

如果您使用：active伪类而不是：hover，当您将鼠标悬停在元素上时，它没有闪烁。那闪烁真的很烦人。

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

通过使用：active发生的事情是点击元素时它将被调整为高度：0，width：0所以将显示1px边框的小点，但是一旦用户开始调整大小，你就会得到正是你想要调整大小的东西。并且在每次后续调整大小时都没有任何故障，它只是完美运行。

我觉得这比使用悬停要小得多。感谢Pfft的上述回复，这正是我所寻找的，并引导我自己略微改变了解决方案！

这是一个jsfiddle：http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Answer 3

您要求针对您的问题采取解决方法，或者至少想知道如何解决问题。我为你做了一个简单的解决方法，可能需要一些工作;请注意，这是一种解决方法，因此可能包含故障。

.cls {
    width: 100px;
    height: 100px;
    resize: both;
    overflow: auto;
    border: 1px dotted #000;
}

.cls:hover {
    width: 1px;
    height: 1px;
}

更新了小提琴：http://jsfiddle.net/FNXnD/1/

注意 Chrome和Safari可能会在将来的版本中更改CSS3调整大小功能。

Answer 4

或者您可以使用jQuery-UI制作可调整大小的窗口。

我继续解决了我在尝试使用带有滚动溢出的div的jQuery ui resizable小部件时遇到的一些问题。问题是调整大小手柄位于滚动条的内部。

为了解决这个问题，我制作了三个嵌套在彼此内部的div

第一个是Wrapper，你可以在这里设置div的起始大小。

第二个用于句柄，其大小应设置为其父div（包装div）的100％。您必须调整z-index以将它们放置在最终滚动条上。

第二个div还应该包含可拖动的句柄div和窗口div，其中所有的窗口内容都将是。

可拖动的句柄div（.draggable）和窗口div（.window）都需要相对定位。这样它们就可以相互正确定位，因此可拖动的手柄不会超过滚动条的顶部。

.window div应该缩放为父div的100％，就像之前的div一样。这个将有一个滚动溢出。现在因为当你使用jQuery ui调整句柄div时，这等于100％处理div，它也会调整这个div的大小。

将可拖动的div设置为100％的宽度和任何你想要的高度，但任何增加的高度都会将窗口div向下推到句柄div，你需要在底部添加等量的padding-bottom处理div来解决这个问题。您还需要将句柄div overflow设置为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'});
});

Answer 5

$('.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;
});

Answer 6

在javascript中使用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中的大小。如果提供值，它们将设置高度和宽度。如果未明确指定mesurment，则默认使用px。

在第二部分中，它只是检查新尺寸（your_x）是否大于原始尺寸，如果是，它会调整尺寸，如果不是，它将被忽略。

AND YES，jquery将覆盖你的css规范;）任何人，更大或更小的值

Answer 7

使用！important来覆盖css：

.cls {
  border: solid 1px;
  width: 100px !important;
  height: 100px !important;
  resize: both;
  overflow: auto;   
}

将div的大小调整为小于其声明的大小？

7 个答案: