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

Question

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

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

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

Answer 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'; 

Answer 2

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

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

Answer 3

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

1. 页眉
2. 主要内容
3. 页脚

我保留 页眉和页脚 div 为正文宽度，而主要内容通常为 900 像素宽。我给出了全宽页面的漂亮干净的效果:)

希望它有帮助:)

Answer 4

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

如果您希望最大程度地减少高度太小的发生次数，可以使用“min-height”属性并以像素为单位定义它。例如，如果您知道预期目标设备的最小所需高度是 320 像素，则可以设置“min-height: 320 px”以确保在最小的设备上您不会看到下面的任何空间。