13

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

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

这是一个示例 div：

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

http://jsfiddle.net/FNXnD/

这个问题有同样的问题，但使用了 GWT，似乎没有一个好的解决方案。

4

6 回答 6

9

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

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

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

于 2012-10-20T04:09:11.510 回答
4

只想对 Pfft 在接受的答案中所说的内容进行轻微修改。

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

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

通过使用 :active 发生的情况是，当单击元素时，它将被调整为 height: 0, width: 0 所以会显示一个 1px 边框的小点，但是一旦用户开始调整大小，你就会得到你想要的想要调整大小。并且在随后的每次调整大小时都不会出现故障，而且效果很好。

我发现这比使用悬停要少得多。感谢 Pfft 的上述回复，这正是我正在寻找的，并让我找到了自己稍微改变的解决方案！

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

于 2015-11-22T19:01:40.697 回答
2

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

.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 调整大小功能。
于 2012-10-20T06:41:33.447 回答
1

或者你可以使用 jQuery-UI 来制作一个可调整大小的窗口。

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

为了解决这个问题，我制作了三个相互嵌套的 div

第一个是 Wrapper，您可以在其中设置 div 的起始大小。

第二个用于句柄，其大小应设置为其父 div（包装器 div）的 100%。您将不得不调整 z-index 以将它们定位到最终的滚动条上。

第二个 div 还应该包含可拖动的句柄 div 和所有窗口内容所在的窗口 div。

可拖动手柄 div (.draggable) 和窗口 div (.window) 都需要相对定位。以便它们彼此正确定位，因此可拖动手柄不会超过滚动条的顶部。

.window div 应该像之前的 div 一样缩放到父 div 的 100%。这个会有滚动溢出。现在，因为当您使用 jQuery ui 调整句柄 div 的大小时，这等于 100% 的句柄 div，所以它也会调整此 div 的大小。

将可拖动的 div 设置为 100% 的宽度和任何您想要的高度，但任何添加的高度都会将窗口 div 推到比句柄 div 更远的位置，您需要向句柄 div 添加等量的 padding-bottom 以解决这个问题。您还需要将句柄 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'});
});
于 2015-12-10T18:48:44.923 回答
0 
$('.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;
});
于 2012-10-20T04:16:59.313 回答
-1

在 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 为单位的大小。如果您提供值，它们将设置高度和宽度。如果您没有明确指定测量值，则默认使用 px。

在第二部分，它只是检查新大小（your_x）是否比原始大小大，如果是，它将调整它的大小，如果不是，它将忽略。

是的，jquery 将覆盖你的 css 规范；）任何人，更大或更小的值

于 2012-10-20T04:03:05.750 回答