Question

我有一个分为两列的网页。我已经使这些列可调整大小。有没有办法只允许宽度调整大小，而不是高度？此外，当我调整一列的大小时，其他列的宽度应相应调整大小。

提供有关我如何在此时实现此目标的信息： 在column1的“resize”事件中，我正在检索该column1＆amp;的宽度。通过从整个网页宽度中减去column1宽度来设置column2的宽度。这是在我调整第一列时调整第二列的相应大小。

有人能说出这是否适合这样做？如果没有，请建议一个更好的方法来做到这一点..提前：）

Answer 1

Resizable widget包含minHeight ^{[API Ref]} 和maxHeight ^{{{的选项3}}} 的。如果将它们设置为等于视口高度，则只能调整宽度。

var wndHeight = $(window).height(); // Use whatever height is appropriate
$('#column1').height(wndHeight)
             .resizable({ minHeight: wndHeight, maxHeight: wndHeight });

这里是[API Ref]。

要调整其他列的大小，您可以使用working example，类似于您之前使用立场调整大小事件所描述的方式。

Answer 2

你试过css属性min-height，max-height，min-width和max-width？如果您使用插件，最常见的是这些属性将作为调整元素大小的限制

Answer 3

FishBasketGordo的回答因某些原因对我不起作用。我能够通过使用ResizableWidget的resize ^{[API Ref]} 事件来解决问题。以下示例假定您正在调整#target_div的大小，并且您希望#target_div保持相同的高度（以像素为单位）。

var targetHeight = $('#target_div').height(); // Get the height of the object.  This can be done when the window loads.
$('#target_div').resizable({
  resize: function(event, ui) {
    ui.element.css('height', targetHeight);
  },
});

宽度 - 仅使用jQuery UI调整大小？

3 个答案: