Question

我有一个在线杂志设计，用旋转木马显示杂志的每一页。我遇到的问题是，无论用户如何调整浏览器的大小，我都希望确保页面可见。

我目前的CSS为：宽度：100％;身高：自动;但问题是随着浏览器变宽，高度超出了视口的高度。我想确保它始终可见 - 无论视口是横向还是纵向。

我假设我需要一点JS或Jquery，但这是我不知道该怎么做的。

有人可以帮忙吗？

提前致谢！

安迪

Answer 1

function ResizeContent() {
   $('MyElement').css('height', $(window).outerHeight() + 'px');
   // or
   $('MyElement').outerHeight($(window).outerHeight());
}

$(window).resize(function () {
   ResizeContent();
});
ResizeContent();

应该做的诀窍......

更新：

function ResizeContent() {
       $('MyElement').css('max-height', $(window).outerHeight() + 'px');
       $('MyElement').css('max-width', $(window).outerWidth() + 'px');
}

A Working Example

在视口中按比例调整DIV大小

1 个答案: