3

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

我已经设法让页面根据浏览器的宽度缩小，如此处所示（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 屏幕上查看时，底部的“按钮”行被浏览器截去一半，用户必须滚动才能看到其余部分。

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

为了更好地说明我想要什么，这是我希望看到的效果动态调整大小示例

这是一张图片，它准确地显示了我的问题是分辨率差异 http://img404.imageshack.us/img404/5840/resolutionissue.jpg

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

4

1 回答 1

0

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

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

这将导致您的容器适应浏览器窗口的 100% 高度（因为容器是您的整个主体的子级，它是 html 标记的子级）。但是，当您应用填充时，您仍然会看到垂直滚动条。因此，您需要确保相对于您应用的填充/边距减少容器元素的高度百分比。在您的情况下，正如 Kai Qing 建议的那样，您应该将容器高度更改为 98%。

于 2013-02-13T12:53:10.483 回答