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

Question

我已经想了差不多一天了。但我找不到任何解决方案来解决我的问题。

有没有办法用滚动条设置自动高度div，因为到目前为止我正在使用固定高度，但我看到一个问题，当我在另一台具有更大或更小屏幕分辨率的笔记本电脑或电脑中打开它时，它仍然存在在固定高度。

这是我的分区：

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

这是我的链接，这样你就可以看到该程序

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

Answer 1

您可以使用脚本来获取计算出的窗口高度并将其设置为等于目标元素高度。在本例中，该函数在加载和调整大小时执行。每个具有

autoheight

类的元素的高度将等于窗口的高度：

示例在此

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

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

上面的方法很好，除了添加一个类之外，不需要做任何改变；但是如果你想避免使用 jQuery，你可以这样做：

示例在此

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

Answer 2

您可以尝试使用固定位置：

<div style="position:fixed; overflow:auto; width:100%; height:100%;">

Answer 3

你想使用CSS来设置高度吗？

.autoHeight {
height: 100vh;
display: flex;
align-items: center; justify-content: center; background: #3292d3;
color: #ffffff;
font-size: 24px;
margin: 0 0 50px;
}

<h2> autoHeight for css </h2>
<div class='autoHeight'> <p> you can resize screen to see exact height works or not. </p> </div>

如果你想使用 jQuery 获取高度

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

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

.autoheight {
    background-color: #3292d3;
    font-size:24px;
    color:white;
    padding:10px;
    margin: 0 0 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="autoheight">
    <h1>try resizing the window vertically. and see the result</h1>
</div>