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

Posted 2023-03-06

【中文标题】如何使高度自动取决于屏幕分辨率

【英文标题】：how to make height auto depends in screen resolution

【发布时间】：2013-09-04 18:27:00

【问题描述】：

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

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

这是我的 div：

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

here's my link so you can see the program

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

【参考方案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%;

【讨论】：

@JoshC...uhm..你能帮我看看如何在我的程序中应用它...我只是复制粘贴它，但我不知道该怎么做才能让它运行，因为我没有使用 javascript 的背景。 :(

@JoshC...我在想如果计算浏览器高度为什么会有滚动条。应该是没有滚动条...

那是因为我在它下面添加了空格以表明它正在工作。 background:blue 代表屏幕大小，因此是最上面的内容。

@JochC...我看到了..如果它正在计算浏览器的高度，那么它也会计算屏幕分辨率..所以，我认为我正在寻找一个.. .uhm...你能帮我申请吗？因为我只是将它粘贴到脚本中... :( 抱歉在 javascript 中是新手

您还需要 JQuery 才能工作。尝试最新版本。然后将类“ autoheight ”放在你想要做的任何事情上。

【参考方案2】：

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

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

【讨论】：

@YotamOmer...我之前已经尝试过，但它不适合我的屏幕...也不行

@PrincessToledo 你能给我发一个你网站的链接或者更多的代码让我仔细看看吗？

@YotamOmer...我编辑了我的帖子，有一个链接，您可以下载我的程序...它只有一个文件..感谢帮助 :)