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

Question

Is there a way to resize a div to smaller than the declared height and width?

I'm making an application where the user can resize a div and save it. However, when I load it later and set it to the size the user set to last time, they can make the div bigger, but not smaller.

This is a sample div:

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

http://jsfiddle.net/FNXnD/

This question has the same issue but uses GWT and doesn't seem to have a good solution.

Answer 1

If you want to use the CSS3 UI resize feature, then your browser decides whether you can make it smaller or bigger than declared width or height. http://www.w3.org/TR/css3-ui/#resize

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

In Firefox for example, you can resize it smaller than your declared width or height. Whilst in chrome you cannot.

Answer 2

Just want to make a slight modification to what Pfft said in the accepted answer.

If you use the :active pseudo-class instead of :hover it doesn't have the flicker when you hover over the element. That flicker is really annoying.

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

By using :active what happens is when clicking on the element it will be resized to the height: 0, width: 0 so a little dot where the 1px border is will be shown but as soon as the user starts resizing you get exactly what you would want in resizing. And on every subsequent resize there is no glitch and it just works perfectly.

I find this to be much less annoying than using hover. Thanks to Pfft for the above response, it was exactly what I was looking for and led me to my own slightly altered solution!

Here's a jsfiddle of it: http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Answer 3

You requested a workaround for your problem, or was wondering how-to at least. I made you a simple workaround that might require a little work; note it is a workaround, and might therefore contain glitches.

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

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

​ Updated fiddle: http://jsfiddle.net/FNXnD/1/

• Chrome, and Safari might change the CSS3 resize feature in future versions.

Answer 4

Or you can use jQuery-UI to make a resizable window.

I went ahead and addressed some issues I experienced when trying to use the jQuery ui resizable widget with a div that had a scroll overflow. The issue was that the resize handles were positioned inside of the scrollbars.

To fix this I made three divs nested inside of each other

The first one is the Wrapper and is where you set the starting size of the div.

The second one is for the handles and its size should be set to 100% of its parent div (the wrapper div). You will have to adjust the z-index to position them onto of the eventual scrollbars.

The second div should also contain the draggable handle div and the window div where all your windows content will be.

Both the draggable handle div (.draggable) and the window div (.window) need to be positioned relatively. So that they are positioned properly with each other and so the draggable handle won't be over the top of your scrollbars.

The .window div should be scaled to 100% the parent div just as the div before. This one will have a scroll overflow. Now because this is equal to 100% the handles div when you resize the handle div with jQuery ui it will also resize this div.

Set the draggable div to a width of 100% and a height of whatever you want but any added height will push the window div down further then the handle div and you will need to add an equal amount of padding-bottom to the handle div to fix this. You will also need to set the handles div overflow to visible.

After all that add whatever styling you want to the different elements and you should be good. Its hard to explain but, I hope it makes sense. All the code is below and hopefully it helps explain better then my rambling. This will definitely allow you to resize the window smaller, move the div around and also have a scroll overflow with your div should you want it.

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 and jQuery-UI it's a good idea to use the minHeight and minWidth options with the resizable widget otherwise your window will be able to be resized to almost nothing and could cause some annoying side effects like making the div so small that you need to reload the page to click the resizing handles. It also just looks more professional in my opinion.

For the draggable widget you target the wrapper for the entire div you want to move around and then give it a handle of the draggable div we placed in our window 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

In 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);

assuming you size are in PX.

Height() and width() will return the size in px if not arguments are specified. They will set the height and width if you provide a value. If you don't explicitly specify a mesurment, px are used by default.

On the second part, it simply check if the new size (your_x) is biggre than the originla size, if so, it will resize it, if not it will jut ignore.

AND YES, jquery will overwide your css specification ;) anyone, biger or smaller values

Answer 7

use !important to override it from css:

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