Измените размер div ниже его объявленного размера?

Ответ 1

Вы запросили обходной путь для своей проблемы или задались вопросом как минимум. Я сделал вам простой способ обхода, который может потребовать небольшой работы; обратите внимание, что это обходной путь и, следовательно, может содержать глюки.

.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 в будущих версиях.

Ответ 2

Если вы хотите использовать функцию изменения размера CSS3 UI, тогда ваш браузер решает, можно ли сделать его меньше или больше объявленной ширины или высоты. http://www.w3.org/TR/css3-ui/#resize

Пользовательский агент может ограничить диапазон изменения размера чем-то подходящим, например, между исходным отформатированным размером элемента и достаточно большим, чтобы охватить все содержимое элемента.

В Firefox, например, вы можете изменить размер меньше, чем заявленная ширина или высота. Пока в хром вы не можете.

Ответ 3

Просто хочу внести небольшое изменение в то, что Pfft сказал в принятом ответе.

Если вы используете: active pseudo-class вместо: hover, он не имеет мерцания при наведении на элемент. Это мерцание действительно раздражает.

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

Используя: активное, что происходит, когда вы нажимаете на элемент, он будет изменен до высоты: 0, width: 0 так что маленькая точка, где будет отображаться граница 1px, но как только пользователь начнет изменять размер, вы получите именно то, что вы хотели бы изменить. И при каждом последующем изменении размера нет глюка, и он просто отлично работает.

Я считаю, что это гораздо менее раздражает, чем использование зависания. Благодаря Pfft для вышеупомянутого ответа это было именно то, что я искал, и привело меня к собственному слегка измененному решению!

Здесь jsfiddle: http://jsfiddle.net/kronenbear/v4Lq5o09/1/

Ответ 4

Или вы можете использовать jQuery-UI для создания изменяемого размера окна.

Я пошел вперед и рассмотрел некоторые проблемы, которые я испытал при попытке использовать виджет jQuery ui resizable с div, у которого было переполнение прокрутки. Проблема заключалась в том, что ручки изменения размера располагались внутри полос прокрутки.

Чтобы исправить это, я сделал три div вложенных друг в друга

Первый - это Wrapper, где вы устанавливаете начальный размер div.

Второй для ручек и его размер должен быть установлен на 100% от его родительского div (обертка div). Вам нужно будет отрегулировать z-индекс, чтобы разместить их на возможных полосах прокрутки.

Второй div должен также содержать перетаскиваемый дескриптор div и div окна, где будет все содержимое вашего окна.

И перетаскиваемый дескриптор div (.draggable), и div окна (.window) должны быть расположены относительно. Чтобы они были расположены правильно друг с другом, и поэтому перетаскиваемый дескриптор не будет находиться поверх верхней части ваших полос прокрутки.

Развертывание .window div должно быть масштабировано до 100% родительского div, как и div ранее. У этого будет переполнение прокрутки. Теперь, поскольку это равно 100%, обработчики div при изменении размера дескриптора 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'});
});

Ответ 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;
});

Ответ 6

В javascript 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) большим, чем размер originla, если это так, он изменит его размер, если не будет игнорировать.

И ДА, jquery будет по всей вашей спецификации css;) все, большие или меньшие значения

Ответ 7

use! важно переопределить его из css:

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