css - 如何使高度自动取决于屏幕分辨率

Question

这几天我一直在想这个问题。但我找不到任何解决方案。

有没有办法设置自动高度 带滚动条的 div，因为截至目前我使用的是固定高度，但是当我在另一台笔记本电脑或 PC 中打开它时我看到了问题更大或更小的屏幕分辨率仍处于固定高度。

这是我的 div:

<div style="overflow:auto; width:1050px; height:760px;">

here's my link so you can see the program

我想要的只是高度会根据屏幕分辨率自动调整..

Answer 1

您可以使用脚本获取计算出的窗口高度并将其设置为等于目标元素高度。在这种情况下，该函数在加载和调整大小时执行。每个具有 autoheight 类的元素将被赋予一个等于窗口高度的高度:

EXAMPLE HERE

var setElementHeight = function () {
    var height = $(window).height();
    $('.autoheight').css('min-height', (height));
};

$(window).on("resize", function () {
    setElementHeight();
}).resize();

上面的方法很好，因为除了添加一个类之外，它不需要任何更改；但是，如果您想避免使用 jQuery，则可以改为执行以下操作:

EXAMPLE HERE

html, body {
    height:100%;
    width:100%;
}
.autoheight {
    height:100%;
}