javascript - 动态地使网页垂直适合浏览器

Question

我对这一切还比较陌生，上周一直在处理一个页面。到目前为止，我发现这个网站非常有用，但我似乎无法让我的页面完全动态地垂直适应浏览器窗口。我希望它缩小元素，以便它们都适合浏览器而没有垂直滚动条。这样做的原因很简单，它将是一个受移动应用程序启发的登录页面，按下按钮，它将带您到您需要去的地方。但是，用户会有不同的屏幕尺寸/分辨率，因此页面必须流畅。

我已经设法让页面根据浏览器的宽度缩小，如此处 ( jsFiddle Demo ) 所示。

 container {
    padding: 1% 1%;
    width: 80%;
    height: 100%;
    max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
    /*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
    margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}

如您所见，所有元素都会根据浏览器的宽度动态收缩。但是，当在 1024x768 屏幕上查看时，底部一行“按钮”被浏览器截掉了一半，用户必须滚动才能看到其余部分。

我已在此站点上尝试了一些解决方案，但似乎无法正常工作。这里有人可以帮我让它动态调整到浏览器的宽度和高度吗？

为了更好地说明我想要什么，这是我希望看到的效果dynamic resizing example

这是一张准确显示我的问题的图片 Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg

请注意，按钮之间的间距会因百分比间距而缩小，但如果仅水平调整窗口，图像将缩小以适合。我需要它将整个内容压缩到浏览器窗口中。

Answer 1

为确保您的容器和子元素(在需要时)垂直填充屏幕，您需要确保您也将 100% 高度值应用于这些元素的整体父元素。在您的情况下，我会将以下规则应用于您的 CSS:

html,body
{
  height: 100%;
  padding: 0px;
  margin: 0px;
}

这会导致您的容器适应浏览器窗口 100% 的高度(因为容器是整体主体的子元素，是 html 标签的子元素)。但是，由于您应用了填充，您仍然会看到垂直滚动条。因此，您需要确保相对于您应用的填充/边距减少容器元素的高度百分比。在您的情况下，正如凯青在上面所建议的那样，您应该将容器高度更改为 98%。