在手机屏幕上设置浏览器窗口的固定大小答案

【问题标题】：Set fix size of browser window on mobile screen在手机屏幕上设置浏览器窗口的固定大小
【发布时间】：2013-12-04 12:54:08
【问题描述】：

我正在开发响应式网站，可能有一个常见问题，但我找不到答案，需要您的建议。我希望浏览器窗口在移动屏幕上的高度：500px 上修复。现在我有这种情况（看图片）。我需要避免下面的白色，并希望我的容器适合整个屏幕，高度不超过 500 像素。感谢您的任何建议！

【问题讨论】：

一种可能的解决方案是查看您定位的所有设备并找到具有最小高度的设备。例如，如果您的目标是所有移动设备，并且您知道 300px 是所有设备上的最小高度，请将最小高度设置为 300px，并且内容应该将其他所有内容向下推。
感谢您的建议！但我需要容器在移动屏幕上的高度不超过 500 像素，希望容器短。但是当我尝试设置时，例如 - body {500px;} 没有任何反应
如果您的容器设置为 500 像素高度并且屏幕设置为 650 像素高度，您将无法让容器填满整个屏幕，这就是空白的原因。如果你想要responsive 而不是使用%。

【解决方案1】：

将您的容器高度和宽度设置为 100%。

#container
{
  height : 100%;
  width : 100%;
}

如果你不希望你的高度超过 500px，你可以使用 max-height 属性。

max-height : 500px;

【讨论】：

如果要占用整个屏幕，则使用 height:100%;
这是他想要最大高度 500 像素但要填满整个屏幕的全部问题，如果屏幕高度超过 500 像素，这是不可能的。因此，您的答案不会删除高度超过 500 像素的屏幕上的任何空白区域，并且不会使用 height:100%; 将最大高度保持在 500 像素
我认为你不能同时满足这两个条件。如果您只想删除空白，请尝试为您的 body 元素赋予背景色。
感谢您的所有回答！特别感谢Jithin。我将宽度和高度设置为 100%，并使用 position:fixed 作为页脚。它的工作完美。非常感谢！）