创建适合任何屏幕分辨率的母版页

Posted 2023-03-05

【中文标题】创建适合任何屏幕分辨率的母版页

【英文标题】：Create a masterpage that fits any screen resolution

【发布时间】：2011-09-04 10:20:07

【问题描述】：

我创建了一个母版页，我希望附加到它的 ASP.NET 页面适合任何屏幕分辨率。它是一个基于 html 表格的设计。

我读到如果您将表格的宽度和高度保持为 100%，那么它应该适合任何分辨率。我做了同样的事情，它将其宽度调整为任何屏幕分辨率，但不是高度。我们会在底部看到一个用于较高屏幕分辨率的空白区域，并为较低屏幕分辨率创建一个滚动条。

有人知道如何解决这个问题吗？

【问题讨论】：

显示你的代码，以及你目前拥有的东西

【参考方案1】：

我认为如果你想要高度，你必须使用 javascript。

var myHeight = 460;
if (document.body && document.body.offsetWidth) 
 myHeight = document.body.offsetHeight;

if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) 
 myHeight = document.documentElement.offsetHeight;

if (window.innerWidth && window.innerHeight) 
 myHeight = window.innerHeight;

之后，您可以设置外部 div 的高度

var myDiv = document.getElementById('myDiv'); 
myDiv.style.height = myHeight + 'px'; 

【参考方案2】：

大多数开发者想要修复的是宽度。 高度不是问题。你永远不会知道人们使用什么分辨率。相信我，这本身就是一个大问题。

所以，我建议你固定宽度并坐下来：D

【参考方案3】：

您应该选择基于 DIV 的页面，而不是基于表格的页面。它通常易于创建和处理。就高度而言，你不应该担心它，因为高度可能会随着内容的增加而增加。就我个人而言，每当我想要全宽时，我都会将我的 HTML 分成三个部分。

标题 主要内容 页脚

我将 eader 和 footer div 保持在全身宽度，而主要内容通常是 900px 宽。我给出了全宽页面的干净效果:)

希望对你有帮助:)

【参考方案4】：

可能值得添加以帮助理解，在您描述的示例中 100% 高度属性将与内容相关，即元素的高度将扩展和收缩以适应您选择插入的任何内容，正如 UGS 所说。

如果您希望最小化高度太小的情况，可以使用“最小高度”属性并以像素为单位进行定义。例如，如果您知道目标设备的最小期望高度是 320 像素，则可以设置“最小高度：320 像素”以确保在最小的设备上您不会看到下方的任何空间。